良好的代码习惯，会让我们进步快，这就要我们有更好的规范和好的代码格式。不论我们是入门还是精通，好的代码规格和格式，可以让别人在阅读你的代码的时候，感觉很清新，一目了然。如果你想让你的代码更规范，eslint验证规则就是我们最好的选择。eslint规范可以让我们的代码更规范，效率更高效.
下面就跟着我一步一步让我们超神：
1. 首先在vscode安装eslint插件和vetur插件
2. 下载依赖
npm install @vue/eslint-config-standard @vue/cli-plugin-eslint eslint eslint-plugin-vue -D
# yarn
yarn add @vue/eslint-config-standard @vue/cli-plugin-eslint eslint eslint-plugin-vue -D
3. 在文件的根目录添加 .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/strongly-recommended',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
// ? javascript rules
// 开发模式允许使用console
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 开发环境允许使用调试 (生产模式禁用)
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 允许使用 async-await
'generator-star-spacing': 'off',
// 禁止使用 var
'no-var': 'error',
// 函数名括号前不需要有空格
'space-before-function-paren': 'off',
// 代码块中避免多余留白
'padded-blocks': 'off',
// 最多出现3个连续空行
'no-multiple-empty-lines': ['error', {
'max': 3,
'maxBOF': 1
}],
// 自定义规则
"no-eval": 0,
"eqeqeq": 0,
"no-unused-vars": [
"error",
{
"argsIgnorePattern": "commit"
}
],
// 自定义规则
// ? vue rules
// html属性必须换行
'vue/max-attributes-per-line': 'off',
// 没有内容的元素需要使用闭合标签
'vue/html-self-closing': 'off'
}
}
4. 然后设置vscode设置setting.json
ctrl + p
// 搜索 setting.json
把我的json贴出来，方便大家设置：
{
"extensions.ignoreRecommendations": false,
"files.associations": {
"*.vue": "vue",
"*.wxml": "html",
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript",
"*.js": "javascript",
"*.plist": "json",
"*.json": "json"
},
"editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true, //连字符
"files.insertFinalNewline": false, //启用后，保存文件时在文件末尾插入一个最终新行
"git.autofetch": true,
"editor.fontSize": 16, //以像素为单位控制字号
// "editor.fontFamily": "monospace", //控制字体系列
"git.enableSmartCommit": true, //在没有暂存的更改时提交所有更改
"explorer.confirmDelete": true, //控制资源管理器是否应在删除文件到废纸篓时进行确认
"editor.wordWrap": "on", //控制折行方式 off-禁用折行 on-根据视区宽度折行
//打开新页面 welcomePage-打开默认页面 none-不打开
"workbench.startupEditor": "newUntitledFile",
//控制在资源管理器内拖放移动文件或文件夹时是否进行确认
"explorer.confirmDragAndDrop": false,
"window.zoomLevel": 0, //调整窗口的缩放级别。原始大小是 0
"git.confirmSync": false,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// "wrap_attributes": "force-expand-multiline" //强制展开多行
// "wrap_attributes": "force-aligned"
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": true,
"wrapAttributes": false,
"sortAttributes": true
},
"prettier": {
"semi": false // 去掉自动分号
}
},
"beautify.config": {
"brace_style": "collapse,preserve-inline" //解决花括号中换行
},
"vetur.format.defaultFormatter.js": "vscode-typescript", //格式化js代码
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化html代码
// "vetur.format.defaultFormatter.html": "prettier", //格式化html代码
"editor.formatOnSave": true,
"vetur.format.options.tabSize": 2,
"workbench.iconTheme": "vscode-icons",
// "vetur.format.options.useTabs": true, //是否在每一行的末尾添加分号
"editor.tabSize": 2,
//eslint 2.0 以上配置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
// "editor.defaultFormatter": "vscode.typescript-language-features"
},
"sync.gist": "6cb2763458c29a2ffadc70c8e91fcbfe",
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"tabnine.experimentalAutoImports": true,
"polacode.backgroundColor": "#ffffff",
"polacode.shadow": "none",
"polacode.target": "container",
"gitlens.views.repositories.enabled": true,
"gitlens.views.repositories.avatars": false,
"gitlens.views.repositories.showBranchComparison": false
}
如果有用不到的设置直接删掉就行，这样就可以完美的使用eslint,是不是很简单。
