初始化项目
yarn create vite my-vue-app --template vue-ts
添加Eslint
npx eslint --init
捕获.PNG
检测下eslint 是否生效
package.json文件里添加 script
"lint": "eslint . --ext .ts,.vue"
eslint 默认只检测.js的文件， 所以需要 --ext 来指定文件类型
修改下配置来适配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',
],
...
}
创建.prettierrc.js
module.exports = {
// printWidth: 80,
// tabWidth: 2,
// useTabs: false,
semi: false, // 未尾逗号, default: true
singleQuote: true, // 单引号 default: false
// quoteProps: 'as-needed',
// jsxSingleQuote: false,
trailingComma: 'none', // 未尾分号 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 缩进
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里修改些相应的内容
...
"lint": "eslint . --ext .ts,.vue --fix"
...
"lint-staged": {
"*.{ts,vue}": [
"prettier --write .",
"npm run lint"
]
}
