安装eslint
npm i -g eslint //全局安装
npm i -D eslint //局部安装
安装完毕后 初始化
npm init //查看该目录是否有package.json文件，没有先安装
eslint --init //得到.eslintrc.js 文件 或者自己手动写一个该文件
配置eslintrc.js文件
module.exports = {
root: true,
parserOptions: {
//指定想要支持的 JavaScript [语言选项]
parser: 'babel-eslint'
},
env: {
//指定要启用的环境 检测时不会把这些环境 全局变量识别成未定义的变量而报错
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 未使用的变量
'no-unused-vars': 'off',
// tab键提示
'no-tabs': 'true',
// 没有意义的表达式
'no-unused-expressions': 'off',
// new操作不赋值
'no-new': 'off',
// 使用未定义的变量
'no-undef': 'off',
'quotes': [2, 'single', 'avoid-escape']
}
}
VScode eslint-plugin-vue 自动修复eslint报错
npm i -g eslint-plugin-vue
image.png
添加eslint 和 vetur 插件
image.png
image.png
image.png
//用户配置里面
{
"editor.tabSize":2, #代码缩进修改成2个空格
"editor.formatOnSave": true, #每次保存的时候自动格式化
"eslint.autoFixOnSave": false, #每次保存的时候将代码按eslint格式进行修复
"prettier.eslintIntegration": true, #让prettier使用eslint的代码格式进行校验
"prettier.semi": false, #去掉代码结尾的分号
"prettier.singleQuote": true, #使用带引号替代双引号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true #让函数(名)和后面的括号之间加个空格
}
//作者本人的用户配置：
{
//开启 eslint 支持
"prettier.eslintIntegration": true,
//使用单引号
"prettier.singleQuote": true,
//结尾不加分号
"prettier.semi": true,
//.vue文件template格式化支持，并使用js-beautify-html插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
//js-beautify-html格式化配置，属性强制换行
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto", //vue组件中html代码格式化样式
"end_with_newline": false
}
},
//根据文件后缀名定义vue文件类型
"files.associations": {
"*.vue": "vue"
},
//配置 ESLint 检查的文件类型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
//保存时eslint自动修复错误
"eslint.autoFixOnSave": true,
"eslint.run": "onSave",
//保存自动格式化
"editor.formatOnSave": true,
"workbench.startupEditor": "newUntitledFile",
"files.autoSave": "off",
"window.zoomLevel": 0,
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true
},
"git.autofetch": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"editor.tabSize": 2,
"editor.fontSize": 14,
"editor.lineHeight": 26,
"git.enableSmartCommit": true,
"workbench.iconTheme": "material-icon-theme",
"files.enableTrash": false,
"sync.gist": "49fa325daff8107a0eb19ab496b9f40d",
"editor.minimap.enabled": false,
"eslint.alwaysShowStatus": true,
}
