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, } })