chore: add lint

Author: shaobeichen

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,91 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+static/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

.eslintrc.js

@@ -1,97 +1,26 @@
 module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-    node: true,
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended', // 使用插件支持vue3
-    'plugin:vue/essential',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-    'eslint-config-prettier',
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    parser: '@typescript-eslint/parser',
-    sourceType: 'module',
-  },
-  plugins: ['vue', 'prettier', '@typescript-eslint'],
-  rules: {
-    semi: ['warn', 'never'], // 禁止尾部使用分号
-    'no-console': 'warn', // 禁止出现console
-    'no-debugger': 'warn', // 禁止出现debugger
-    'no-duplicate-case': 'warn', // 禁止出现重复case
-    'no-empty': 'warn', // 禁止出现空语句块
-    'no-extra-parens': 'warn', // 禁止不必要的括号
-    'no-func-assign': 'warn', // 禁止对Function声明重新赋值
-    'no-unreachable': 'warn', // 禁止出现[return|throw]之后的代码块
-    'no-else-return': 'warn', // 禁止if语句中return语句之后有else块
-    'no-empty-function': 'warn', // 禁止出现空的函数块
-    'no-lone-blocks': 'warn', // 禁用不必要的嵌套块
-    'no-multi-spaces': 'warn', // 禁止使用多个空格
-    'no-redeclare': 'warn', // 禁止多次声明同一变量
-    'no-return-assign': 'warn', // 禁止在return语句中使用赋值语句
-    'no-return-await': 'warn', // 禁用不必要的[return/await]
-    'no-self-compare': 'warn', // 禁止自身比较表达式
-    'no-useless-catch': 'warn', // 禁止不必要的catch子句
-    'no-useless-return': 'warn', // 禁止不必要的return语句
-    'no-mixed-spaces-and-tabs': 'warn', // 禁止空格和tab的混合缩进
-    'no-multiple-empty-lines': 'warn', // 禁止出现多行空行
-    'no-trailing-spaces': 'warn', // 禁止一行结束后面不要有空格
-    'no-useless-call': 'warn', // 禁止不必要的.call()和.apply()
-    'no-var': 'warn', // 禁止出现var用let和const代替
-    'no-delete-var': 'off', // 允许出现delete变量的使用
-    'no-shadow': 'off', // 允许变量声明与外层作用域的变量同名
-    'dot-notation': 'warn', // 要求尽可能地使用点号
-    'default-case': 'warn', // 要求switch语句中有default分支
-    eqeqeq: 'warn', // 要求使用 === 和 !==
-    curly: 'warn', // 要求所有控制语句使用一致的括号风格
-    'space-before-blocks': 'warn', // 要求在块之前使用一致的空格
-    'space-in-parens': 'warn', // 要求在圆括号内使用一致的空格
-    'space-infix-ops': 'warn', // 要求操作符周围有空格
-    'space-unary-ops': 'warn', // 要求在一元操作符前后使用一致的空格
-    'switch-colon-spacing': 'warn', // 要求在switch的冒号左右有空格
-    'arrow-spacing': 'warn', // 要求箭头函数的箭头前后使用一致的空格
-    'array-bracket-spacing': 'warn', // 要求数组方括号中使用一致的空格
-    'brace-style': 'warn', // 要求在代码块中使用一致的大括号风格
-    camelcase: 'warn', // 要求使用骆驼拼写法命名约定
-    indent: ['warn', 4], // 要求使用JS一致缩进4个空格
-    'max-depth': ['warn', 4], // 要求可嵌套的块的最大深度4
-    'max-statements': ['warn', 100], // 要求函数块最多允许的的语句数量20
-    'max-nested-callbacks': ['warn', 3], // 要求回调函数最大嵌套深度3
-    'max-statements-per-line': ['warn', { max: 1 }], // 要求每一行中所允许的最大语句数量
-    quotes: ['warn', 'single', 'avoid-escape'], // 要求统一使用单引号符号
-    'vue/require-default-prop': 0, // 关闭属性参数必须默认值
-    'vue/singleline-html-element-content-newline': 0, // 关闭单行元素必须换行符
-    'vue/multiline-html-element-content-newline': 0, // 关闭多行元素必须换行符
-    // 要求每一行标签的最大属性不超五个
-    'vue/max-attributes-per-line': ['warn', { singleline: 5 }],
-    // 要求html标签的缩进为需要4个空格
-    'vue/html-indent': [
-      'warn',
-      4,
-      {
-        attribute: 1,
-        baseIndent: 1,
-        closeBracket: 0,
-        alignAttributesVertically: true,
-        ignores: [],
-      },
+    env: {
+        browser: true,
+        es2021: true,
+        node: true
+    },
+    parser: 'vue-eslint-parser',
+    extends: [
+        'plugin:vue/base',
+        'eslint:recommended',
+        'plugin:vue/vue3-recommended',
+        'plugin:vue/essential',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:prettier/recommended',
+        'eslint-config-prettier'
     ],
-    // 取消关闭标签不能自闭合的限制设置
-    'vue/html-self-closing': [
-      'error',
-      {
-        html: {
-          void: 'always',
-          normal: 'never',
-          component: 'always',
-        },
-        svg: 'always',
-        math: 'always',
-      },
-    ],
-  },
+    parserOptions: {
+        ecmaVersion: 'latest',
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module'
+    },
+    plugins: ['vue', 'prettier', '@typescript-eslint'],
+    rules: {
+        'vue/no-v-html': 'off'
+    }
 }

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["johnsoncodehk.volar"]
+}

.vscode/settings.json

@@ -1,3 +1,4 @@
-{
-  "vetur.experimental.templateInterpolationService": true
-}
+{
+  "editor.detectIndentation": false,
+  "editor.tabSize": 4
+}

commitlint.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+    extends: ['@commitlint/config-conventional'],
+    rules: {
+        'type-case': [2, 'always', 'lower-case'],
+        'type-empty': [2, 'never'],
+        'type-enum': [
+            2,
+            'always',
+            [
+                'build',
+                'chore',
+                'ci',
+                'docs',
+                'feat',
+                'fix',
+                'merge',
+                'perf',
+                'refactor',
+                'revert',
+                'setup',
+                'style',
+                'test'
+            ]
+        ]
+    }
+}

package.json

@@ -1,10 +1,23 @@
 {
   "name": "blog",
-  "version": "0.0.0",
+  "version": "2.0.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .eslintignore .",
+    "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .eslintignore",
+    "lint": "yarn lint:js && yarn lint:style"
+  },
+  "lint-staged": {
+    "*.{js,vue}": "eslint",
+    "*.{css,vue}": "stylelint"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "lint-staged"
+    }
   },
   "dependencies": {
     "pinia": "^2.0.14",
@@ -15,6 +28,8 @@
   "devDependencies": {
     "@babel/core": "^7.18.6",
     "@babel/eslint-parser": "^7.18.2",
+    "@commitlint/cli": "^17.0.3",
+    "@commitlint/config-conventional": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^5.30.0",
     "@typescript-eslint/parser": "^5.30.0",
     "@vitejs/plugin-vue": "^1.1.4",
@@ -24,9 +39,15 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.1.1",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
+    "stylelint": "^14.9.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^26.0.0",
     "typescript": "^4.1.3",
     "vite": "^2.0.1",
-    "vite-plugin-eslint": "^1.6.1"
+    "vite-plugin-eslint": "^1.6.1",
+    "vue-eslint-parser": "^9.0.3"
   }
 }

prettier.config.js

@@ -1,23 +1,23 @@
 // 在项目根目录创建文件 .prettier.js
 // 以下配置视自己情况而定,并步是每个都需要的
 module.exports = {
-  tabWidth: 4, // 使用4个空格缩进
-  semi: false, // 代码结尾是否加分号
-  trailingComma: 'none', // 代码末尾不需要逗号
-  singleQuote: true, // 是否使用单引号
-  printWidth: 100, // 超过多少字符强制换行
-  arrowParens: 'avoid', // 单个参数的箭头函数不加括号 x => x
-  bracketSpacing: true, // 对象大括号内两边是否加空格 { a:0 }
+    tabWidth: 2, // 使用2个空格缩进
+    semi: false, // 代码结尾是否加分号
+    trailingComma: 'none', // 代码末尾不需要逗号
+    singleQuote: true, // 是否使用单引号
+    printWidth: 100, // 超过多少字符强制换行
+    arrowParens: 'avoid', // 单个参数的箭头函数不加括号 x => x
+    bracketSpacing: true, // 对象大括号内两边是否加空格 { a:0 }
 
-  endOfLine: 'auto', // 文件换行格式 LF/CRLF
-  useTabs: false, // 不使用缩进符,而使用空格
-  quoteProps: 'as-needed', // 对象的key仅在必要时用引号
-  jsxSingleQuote: false, // jsx不使用单引号,而使用双引号
-  jsxBracketSameLine: false, // jsx标签的反尖括号需要换行
-  rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
-  rangeEnd: Infinity, // 结尾
-  requirePragma: false, // 不需要写文件开头的 @prettier
-  insertPragma: false, // 不需要自动在文件开头插入 @prettier
-  proseWrap: 'preserve', // 使用默认的折行标准
-  htmlWhitespaceSensitivity: 'css', // 根据显示样式决定html要不要折行
+    endOfLine: 'auto', // 文件换行格式 LF/CRLF
+    useTabs: false, // 不使用缩进符,而使用空格
+    quoteProps: 'as-needed', // 对象的key仅在必要时用引号
+    jsxSingleQuote: false, // jsx不使用单引号,而使用双引号
+    jsxBracketSameLine: false, // jsx标签的反尖括号需要换行
+    rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
+    rangeEnd: Infinity, // 结尾
+    requirePragma: false, // 不需要写文件开头的 @prettier
+    insertPragma: false, // 不需要自动在文件开头插入 @prettier
+    proseWrap: 'preserve', // 使用默认的折行标准
+    htmlWhitespaceSensitivity: 'css' // 根据显示样式决定html要不要折行
 }

src/App.vue

@@ -6,13 +6,11 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'App',
+  name: 'App'
 })
 </script>
 
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
-body {
-  font-family: 'Poppins', sans-serif;
-}
+<style scoped lang="scss">
+@import './assets/style/font.scss';
+@import './assets/style/minireset.scss';
 </style>

src/assets/style/font.scss

@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
+body {
+    font-family: 'Poppins', sans-serif;
+}