项目质量监测(二)06-Lint工具之ESLint——实战vue项目配置
实战vue项目配置
ESlint配置文件:
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/essential',
'@vue/standard',
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
semi: ['error', 'never'],
},
parserOptions: {
parser: 'babel-eslint',
},
}
需要安装的VSCode插件:
- vue(高亮语法)
- vetur(格式化,代码规范)
- Vue peek(组件跳转)
- vue beautify(vue格式化)
- Vue VSCode Snippets 和 Vue Snippets(代码提示)
- Prettier(格式化 与 上面的Vetur其实是合作格式化)
vscode配置格式化:
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"vetur.format.defaultFormatter.js": "prettier-eslint",
// prettier
"prettier.trailingComma": "es5",
"prettier.semi": false, //句尾不要分号
"prettier.jsxSingleQuote": true, //js使用单引号
"prettier.singleQuote": true,//全局使用单引号
"prettier.eslintIntegration": true, //使用prettier-eslint格式化
配置emmet:
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
在Vue-cli工具中,可以使用npm run lint
:
// bash输出
➜ npm run lint
> vue-recipe@0.1.0 lint /Users/itheima/vue-demo
> vue-cli-service lint
DONE No lint errors found!
来执行vue cli配置好了的Lint脚本:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
vscode中插件推荐使用:
Vue, Vetur, Vue Peek, vue-beautify