Skip to content

Commit 71067e6

Browse files
committed
style: format style
1 parent acd975b commit 71067e6

15 files changed

+564
-517
lines changed

.eslintrc.js

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
module.exports = {
2-
env: {
3-
browser: true,
4-
es2021: true,
5-
node: true
6-
},
7-
parser: 'vue-eslint-parser',
8-
extends: [
9-
'plugin:vue/base',
10-
'eslint:recommended',
11-
'plugin:vue/vue3-recommended',
12-
'plugin:vue/essential',
13-
'plugin:@typescript-eslint/recommended',
14-
'plugin:prettier/recommended',
15-
'eslint-config-prettier'
16-
],
17-
parserOptions: {
18-
ecmaVersion: 'latest',
19-
parser: '@typescript-eslint/parser',
20-
sourceType: 'module'
21-
},
22-
plugins: ['vue', 'prettier', '@typescript-eslint'],
23-
rules: {
24-
'vue/no-v-html': 'off'
25-
}
2+
env: {
3+
browser: true,
4+
es2021: true,
5+
node: true,
6+
'vue/setup-compiler-macros': true
7+
},
8+
parser: 'vue-eslint-parser',
9+
extends: [
10+
'plugin:vue/base',
11+
'eslint:recommended',
12+
'plugin:vue/vue3-recommended',
13+
'plugin:vue/essential',
14+
'plugin:@typescript-eslint/recommended',
15+
'plugin:prettier/recommended',
16+
'eslint-config-prettier'
17+
],
18+
parserOptions: {
19+
ecmaVersion: 'latest',
20+
parser: '@typescript-eslint/parser',
21+
sourceType: 'module'
22+
},
23+
plugins: ['vue', 'prettier', '@typescript-eslint'],
24+
rules: {
25+
'vue/no-v-html': 'off',
26+
'vue/multi-word-component-names': 0
27+
},
28+
globals: { defineOptions: true }
2629
}

.github/workflows/action.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ jobs:
1515
- name: Setup Node.js
1616
uses: actions/setup-node@main
1717
with:
18-
node-version: '14'
18+
node-version: '16'
1919
- name: Install dependencies
2020
run: npm install
2121
- name: Build

commitlint.config.js

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
module.exports = {
2-
extends: ['@commitlint/config-conventional'],
3-
rules: {
4-
'type-case': [2, 'always', 'lower-case'],
5-
'type-empty': [2, 'never'],
6-
'type-enum': [
7-
2,
8-
'always',
9-
[
10-
'build',
11-
'chore',
12-
'ci',
13-
'docs',
14-
'feat',
15-
'fix',
16-
'merge',
17-
'perf',
18-
'refactor',
19-
'revert',
20-
'setup',
21-
'style',
22-
'test'
23-
]
24-
]
25-
}
2+
extends: ['@commitlint/config-conventional'],
3+
rules: {
4+
'type-case': [2, 'always', 'lower-case'],
5+
'type-empty': [2, 'never'],
6+
'type-enum': [
7+
2,
8+
'always',
9+
[
10+
'build',
11+
'chore',
12+
'ci',
13+
'docs',
14+
'feat',
15+
'fix',
16+
'merge',
17+
'perf',
18+
'refactor',
19+
'revert',
20+
'setup',
21+
'style',
22+
'test'
23+
]
24+
]
25+
}
2626
}

app.d.ts renamed to global.d.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
declare module '*.vue' {
2-
import { defineComponent } from 'vue'
3-
const Component: ReturnType<typeof defineComponent>
4-
export default Component
5-
}
1+
declare module '*.vue' {
2+
import { defineComponent } from 'vue'
3+
const Component: ReturnType<typeof defineComponent>
4+
export default Component
5+
}

package.json

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
{
22
"name": "blog",
33
"version": "2.0.0",
4+
"license": "ISC",
45
"scripts": {
56
"dev": "vite",
67
"build": "vite build",
78
"serve": "vite preview",
8-
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .eslintignore .",
9-
"lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .eslintignore",
9+
"lint:js": "eslint --fix --ext \".ts,.js,.vue\" --ignore-path .eslintignore .",
10+
"lint:style": "stylelint --fix \"**/*.{vue,scss,sass,css}\" --ignore-path .eslintignore",
1011
"lint": "yarn lint:js && yarn lint:style"
1112
},
1213
"lint-staged": {
13-
"*.{js,vue}": "eslint",
14-
"*.{css,vue}": "stylelint"
14+
"*.{ts,js,vue}": "eslint",
15+
"*.{scss,sass,css,vue}": "stylelint"
1516
},
1617
"husky": {
1718
"hooks": {
@@ -22,7 +23,7 @@
2223
"dependencies": {
2324
"pinia": "^2.0.14",
2425
"sass": "^1.53.0",
25-
"vue": "^3.0.5",
26+
"vue": "^3.2.37",
2627
"vue-router": "^4.0.0"
2728
},
2829
"devDependencies": {
@@ -32,19 +33,22 @@
3233
"@commitlint/config-conventional": "^17.0.3",
3334
"@typescript-eslint/eslint-plugin": "^5.30.0",
3435
"@typescript-eslint/parser": "^5.30.0",
35-
"@vitejs/plugin-vue": "^1.1.4",
36-
"@vue/compiler-sfc": "^3.0.5",
36+
"@vitejs/plugin-vue": "^2.3.3",
37+
"@vue/compiler-sfc": "^3.2.37",
3738
"@vuedx/typescript-plugin-vue": "^0.7.5",
3839
"eslint": "^8.18.0",
3940
"eslint-config-prettier": "^8.5.0",
4041
"eslint-plugin-prettier": "^4.2.1",
4142
"eslint-plugin-vue": "^9.1.1",
4243
"husky": "^8.0.1",
4344
"lint-staged": "^13.0.3",
45+
"postcss-html": "^1.4.1",
46+
"postcss-scss": "^4.0.4",
4447
"prettier": "^2.7.1",
4548
"stylelint": "^14.9.1",
46-
"stylelint-config-prettier": "^9.0.3",
47-
"stylelint-config-standard": "^26.0.0",
49+
"stylelint-config-recess-order": "^3.0.0",
50+
"stylelint-config-recommended-vue": "^1.4.0",
51+
"stylelint-config-standard-scss": "^4.0.0",
4852
"typescript": "^4.1.3",
4953
"vite": "^2.0.1",
5054
"vite-plugin-eslint": "^1.6.1",

prettier.config.js

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
// 在项目根目录创建文件 .prettier.js
22
// 以下配置视自己情况而定,并步是每个都需要的
33
module.exports = {
4-
tabWidth: 2, // 使用2个空格缩进
5-
semi: false, // 代码结尾是否加分号
6-
trailingComma: 'none', // 代码末尾不需要逗号
7-
singleQuote: true, // 是否使用单引号
8-
printWidth: 100, // 超过多少字符强制换行
9-
arrowParens: 'avoid', // 单个参数的箭头函数不加括号 x => x
10-
bracketSpacing: true, // 对象大括号内两边是否加空格 { a:0 }
4+
tabWidth: 2, // 使用2个空格缩进
5+
semi: false, // 代码结尾是否加分号
6+
trailingComma: 'none', // 代码末尾不需要逗号
7+
singleQuote: true, // 是否使用单引号
8+
printWidth: 100, // 超过多少字符强制换行
9+
arrowParens: 'avoid', // 单个参数的箭头函数不加括号 x => x
10+
bracketSpacing: true, // 对象大括号内两边是否加空格 { a:0 }
1111

12-
endOfLine: 'auto', // 文件换行格式 LF/CRLF
13-
useTabs: false, // 不使用缩进符,而使用空格
14-
quoteProps: 'as-needed', // 对象的key仅在必要时用引号
15-
jsxSingleQuote: false, // jsx不使用单引号,而使用双引号
16-
jsxBracketSameLine: false, // jsx标签的反尖括号需要换行
17-
rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
18-
rangeEnd: Infinity, // 结尾
19-
requirePragma: false, // 不需要写文件开头的 @prettier
20-
insertPragma: false, // 不需要自动在文件开头插入 @prettier
21-
proseWrap: 'preserve', // 使用默认的折行标准
22-
htmlWhitespaceSensitivity: 'css' // 根据显示样式决定html要不要折行
12+
endOfLine: 'auto', // 文件换行格式 LF/CRLF
13+
useTabs: false, // 不使用缩进符,而使用空格
14+
quoteProps: 'as-needed', // 对象的key仅在必要时用引号
15+
jsxSingleQuote: false, // jsx不使用单引号,而使用双引号
16+
jsxBracketSameLine: false, // jsx标签的反尖括号需要换行
17+
rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
18+
rangeEnd: Infinity, // 结尾
19+
requirePragma: false, // 不需要写文件开头的 @prettier
20+
insertPragma: false, // 不需要自动在文件开头插入 @prettier
21+
proseWrap: 'preserve', // 使用默认的折行标准
22+
htmlWhitespaceSensitivity: 'css' // 根据显示样式决定html要不要折行
2323
}

src/App.vue

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,9 @@
22
<router-view />
33
</template>
44

5-
<script lang="ts">
6-
import { defineComponent } from 'vue'
5+
<script lang="ts" setup></script>
76

8-
export default defineComponent({
9-
name: 'App'
10-
})
11-
</script>
12-
13-
<style scoped lang="scss">
14-
@import './assets/style/font.scss';
15-
@import './assets/style/minireset.scss';
7+
<style lang="scss">
8+
@import "./assets/style/minireset";
9+
@import "./assets/style/font";
1610
</style>

src/assets/style/font.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");
2+
23
body {
3-
font-family: 'Poppins', sans-serif;
4+
font-family: Poppins, sans-serif;
45
}

src/assets/style/minireset.scss

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,47 +22,56 @@ h3,
2222
h4,
2323
h5,
2424
h6 {
25-
margin: 0;
26-
padding: 0;
25+
padding: 0;
26+
margin: 0;
2727
}
28+
2829
h1,
2930
h2,
3031
h3,
3132
h4,
3233
h5,
3334
h6 {
34-
font-size: 100%;
35-
font-weight: normal;
35+
font-size: 100%;
36+
font-weight: normal;
3637
}
38+
3739
ul {
38-
list-style: none;
40+
list-style: none;
3941
}
42+
4043
button,
4144
input,
4245
select {
43-
margin: 0;
46+
margin: 0;
4447
}
48+
4549
html {
46-
box-sizing: border-box;
50+
box-sizing: border-box;
4751
}
52+
4853
*,
4954
*::before,
5055
*::after {
51-
box-sizing: inherit;
56+
box-sizing: inherit;
5257
}
58+
5359
img,
5460
video {
55-
height: auto;
56-
max-width: 100%;
61+
max-width: 100%;
62+
height: auto;
5763
}
64+
5865
iframe {
59-
border: 0;
66+
border: 0;
6067
}
68+
6169
table {
62-
border-collapse: collapse;
63-
border-spacing: 0;
70+
border-spacing: 0;
71+
border-collapse: collapse;
6472
}
73+
6574
td,
6675
th {
67-
padding: 0;
76+
padding: 0;
6877
}

src/pages/index.vue

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,48 +9,45 @@
99
</div>
1010
</template>
1111

12-
<script lang="ts">
13-
import { ref, defineComponent } from 'vue'
12+
<script lang="ts" setup>
13+
import { ref } from 'vue'
1414
15-
export default defineComponent({
16-
name: 'PagesIndex',
17-
setup() {
18-
const title = ref(`Hi, I'm Kholid. <br />Front-End Developer.`)
19-
const description = ref(
20-
`I'm a self-taught front-end developer based in Indonesia. And focused on building interactive web apps and some browser extensions.`
21-
)
22-
return { title, description }
23-
}
24-
})
15+
const title = ref(`Hi, I'm Kholid. <br />Front-End Developer.`)
16+
const description = ref(
17+
`I'm a self-taught front-end developer based in Indonesia. And focused on building interactive web apps and some browser extensions.`
18+
)
2519
</script>
2620

2721
<style scoped lang="scss">
2822
.index {
23+
min-height: 100vh;
2924
color: #e5e7eb;
3025
background-color: #111827;
31-
min-height: 100vh;
26+
3227
.container {
3328
max-width: 1024px;
3429
padding-right: 1.25rem;
3530
padding-left: 1.25rem;
3631
margin: 0 auto;
32+
3733
.introduce {
3834
padding-top: 10rem;
3935
padding-bottom: 12rem;
36+
4037
.title {
41-
background-clip: text;
42-
-webkit-background-clip: text;
43-
color: transparent;
44-
background-image: linear-gradient(to bottom right, #60a5fa, #4f46e5);
38+
margin-bottom: 1rem;
4539
font-size: 3rem;
46-
line-height: 1;
4740
font-weight: 700;
48-
margin-bottom: 1rem;
41+
line-height: 1;
42+
color: transparent;
43+
background-image: linear-gradient(to bottom right, #60a5fa, #4f46e5);
44+
background-clip: text;
4945
}
46+
5047
.description {
51-
color: #fff;
5248
max-width: 36rem;
5349
font-weight: 400;
50+
color: #fff;
5451
}
5552
}
5653
}

0 commit comments

Comments
 (0)