1.配置eslint
npm install --save-dev eslint eslint-plugin-vue@next
2.package.json添加下面的配置
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
3.添加.eslintrc.js
module.exports = {
extends: ['plugin:vue/strongly-recommended', 'plugin:prettier/recommended'],
rules: {
'prettier/prettier': 'error',
},
};
4.添加prettier.config
module.exports = {
printWidth: 80, // 每行代码长度（默认80）
tabWidth: 2, // 每个tab相当于多少个空格（默认2）
useTabs: false, // 是否使用tab进行缩进（默认false）
singleQuote: true, // 使用单引号（默认false）
semi: true, // 声明结尾使用分号(默认true)
trailingComma: 'all', // 多行使用拖尾逗号（默认none）
bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
};
5.package.json配置commit提交前的钩子
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"
}
},
"lint-staged": {
"*.js": [
"prettier --write",
"vue-cli-service lint",
"git add"
],
"*.vue": [
"prettier --write",
"vue-cli-service lint",
"git add"
]
},
6. pageckage.json格式化自动命令配置
"format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\" \"*json\" \"*.config.js\" \"*.eslintrc.js\""
终端执行命令
npm run format
//or
yarn format
7.package.json 配置lint检查
"lint": "vue-cli-service lint",
终端执行命令
yarn lint
//or
npm run lint
8.开发环境中开启lint
第一种方式基于vue-cli3.0创建的需要在vue.config.js中
lintOnSave: 'error',
第二种方式在webpack中配置：
config/index.js中添加配置
dev: {
useEslint: true,
}
build/webpack.base.config.js
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay,
fix: true,
}
})