初始化項(xiàng)目
yarn create vite my-vue-app --template vue-ts
添加Eslint
npx eslint --init
捕獲.PNG
檢測(cè)下eslint 是否生效
package.json文件里添加 script
"lint": "eslint . --ext .ts,.vue"
eslint 默認(rèn)只檢測(cè).js的文件柑爸， 所以需要 --ext 來(lái)指定文件類型
修改下配置來(lái)適配vue3
看下eslint-plugin-vue官方地址
在.eslintrc.js中
- 刪除
extends里的"plugin:vue/essential" - 刪除
plugins里的"vue"去掉 - 添加vue3的配置
'plugin:vue/vue3-recommended'
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended'劲藐，
'plugin:vue/vue3-recommended'
],
parserOptions: {
ecmaVersion: '2021',
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: ['@typescript-eslint'],
rules: {}
}
添加 prettier
yarn add -D prettier eslint-config-prettier
修改下.eslintrc.js
module.exports = {
...,
extends: [
...,
'prettier',
],
...
}
創(chuàng)建.prettierrc.js
module.exports = {
// printWidth: 80,
// tabWidth: 2,
// useTabs: false,
semi: false, // 未尾逗號(hào), default: true
singleQuote: true, // 單引號(hào) default: false
// quoteProps: 'as-needed',
// jsxSingleQuote: false,
trailingComma: 'none', // 未尾分號(hào) default: es5 all | none | es5
// bracketSpacing: true,
// bracketSameLine: false,
// jsxBracketSameLine: false,
arrowParens: 'avoid', // default: always
// insertPragma: false,
// requirePragma: false,
proseWrap: 'never',
// htmlWhitespaceSensitivity: 'css',
// vueIndentScriptAndStyle: false, // .vue 縮進(jìn)
endOfLine: 'auto' // default lf
}
prettier 有兩種方案
- prettier 和 eslint-config-prettier 配置的化直接.eslintrc.js extends里加上'prettier'
- 再安裝eslint-plugin-prettier(推薦使用) 配置 extends: ['plugin:prettier/recommended']
添加Lint-staged husky
yarn add -D lint-staged husky
yarn set-script prepare "husky install"
yarn run prepare
npx husky add .husky/pre-commit "npx lint-staged"
給package.json里修改些相應(yīng)的內(nèi)容
...
"lint": "eslint . --ext .ts,.vue --fix"
...
"lint-staged": {
"*.{ts,vue}": [
"prettier --write .",
"npm run lint"
]
}
