手把手教你构建vue项目（微信h5以及hybrid混合开发）（六）——eslint和prettier相结合

前面一开始的时候我并没有在项目中增加eslint代码规范&＃xff0c;eslint对于协同工作和代码规范都是很重要的工具&＃xff0c;那么现在就在已有的项目上配置eslint。

1.通过vue add eslint命令

官网配置地址


命令安装相关依赖之后&＃xff0c;会弹出相关的配置选项
1&＃xff09; Pick an ESLint config&＃xff0c;选择Prettier

2&＃xff09; Pick additional lint features: 选择Lint on save&＃xff0c;即保存时修复错误语法

3&＃xff09; 选完之后你会多出.eslint.js文件

相关配置如下&＃xff1a;

module.exports &＃61; {root: true,env: {node: true,},extends: [&＃39;plugin:vue/essential&＃39;, &＃39;eslint:recommended&＃39;, &＃39;&＃64;vue/prettier&＃39;],parserOptions: {parser: &＃39;babel-eslint&＃39;,},rules: {&＃39;no-console&＃39;: process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;production&＃39; ? 2 : 0,&＃39;no-debugger&＃39;: process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;production&＃39; ? 2 : 0,semi: [2, &＃39;never&＃39;],quotes: [2, &＃39;single&＃39;, { allowTemplateLiterals: true }],},
}

4&＃xff09; 在src根目录新建.prettierrc.js,该文件主要是配合prettier格式化使用
prettier官网
.prettierrc.js

// prettier.config.js or .prettierrc.js
module.exports &＃61; {trailingComma: &＃39;es5&＃39;,tabWidth: 4,semi: false,singleQuote: true,
}

5&＃xff09; 在src根目录新建.editorconfig,该文件主要起到跨编辑器代码约束的作用&＃xff0c;通俗的将就是有人喜欢用webstorm,有人喜欢用vscode&＃xff0c;保持两种编辑器的基本代码规范一样
.editorconfig

# 告诉EditorConfig插件&＃xff0c;这是根文件&＃xff0c;不用继续往上查找
root &＃61; true# 匹配全部文件
[*]
# 设置字符集
charset &＃61; utf-8
# 缩进风格&＃xff0c;可选space、tab
indent_style &＃61; space
# 缩进的空格数
indent_size &＃61; 2
# 结尾换行符&＃xff0c;可选lf、cr、crlf
end_of_line &＃61; lf
# 在文件结尾插入新行
insert_final_newline &＃61; true
# 删除一行中的前后空格
trim_trailing_whitespace &＃61; true# 匹配md结尾的文件
[*.md]
insert_final_newline &＃61; false
trim_trailing_whitespace &＃61; false

2.在vue.config.js中进行eslint的相关配置

vue.config.js中的相关配置

module.exports &＃61; {// 在开发环境保存并且修复lintOnSave: process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;development&＃39;,// eslint报错遮罩devServer: {overlay: {warnings: true,errors: true}},chainWebpack(config){// 注入eslint规则config.module.rule(&＃39;eslint&＃39;)config.module.rule(&＃39;eslint&＃39;).use(&＃39;eslint-loader&＃39;)}
}


3.vscode的eslint相关配置

1) 在vscode插件管理中添加vetur和prettier两个插件


2&＃xff09;配置settings.json文件
操作步骤
文件->首选项->设置

打开用户设置,setting.json文件

这里我直接粘贴我的配置文件&＃xff0c;里面注释很详细

{"git.ignoreMissingGitWarning": true,"workbench.startupEditor": "newUntitledFile","editor.suggestSelection": "first",// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,"window.zoomLevel": 0,"eslint.validate": ["Javascript","Javascriptreact","vue"],"files.associations": {"*.wpy": "vue","*.wxss": "css","*.htm": "html"},// #让函数(名)和后面的括号之间加个空格"Javascript.format.insertSpaceBeforeFunctionParenthesis": true,"Javascript.format.insertSpaceAfterSemicolonInForStatements": false,"typescript.format.insertSpaceAfterSemicolonInForStatements": false,"open-in-browser.default": "google chrome", //默认浏览器// VScode 文件搜索区域配置"search.exclude": {"**/dist": true,"**/build": true,"**/elehukouben": true,"**/.git": true,"**/.gitignore": true,"**/.svn": true,"**/.DS_Store": true,"**/.idea": true,"**/.vscode": false,"**/yarn.lock": true,"**/tmp": true,"**/node_modules/**": true,"**/bower_components/**": true,"**/image/**": true,"**/*.xml": true,"**/.history/**": true,"**/nbproject/**": true,"**/vscode/**": true},// 用来忽略工程打开的文件夹"files.exclude": {"**/.vscode": true,"**/.DS_Store": true,"**/.history": true,"**/nbproject": true},// 配置emmet是否启用tab展开缩写"emmet.triggerExpansionOnTab": true,// 配置emmet对文件类型的支持"emmet.syntaxProfiles": {"vue-html": "html","vue": "html","Javascript": "Javascriptreact","xml": {"attr_quotes": "single"}},// 在react的jsx中添加对emmet的支持"emmet.includeLanguages": {"jsx-sublime-babel-tags": "Javascriptreact","wxml": "html","Javascript": "Javascriptreact"},"[typescript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},"[vue]": {"editor.defaultFormatter": "octref.vetur"},"[Javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},"path-intellisense.mappings": {"&＃64;": "${workspaceRoot}/src","components": "${workspaceRoot}/src/components","assets": "${workspaceRoot}/src/assets","util": "${workspaceRoot}/src/util","plugin": "${workspaceRoot}/src/plugin"},"cssrem.rootFontSize": 37.5,"leetcode.endpoint": "leetcode-cn","C_Cpp.errorSquiggles": "Enabled",// 如果打开注释&＃xff0c;文件中将不提醒eslint报错// "eslint.options": {// "plugins": [// "html"// ]// },// -----------vetur 、 prettier结合配置eslint配置begin ----------------------"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.css": "prettier","vetur.format.defaultFormatter.postcss": "prettier","vetur.format.defaultFormatter.scss": "prettier","vetur.format.defaultFormatter.less": "prettier","vetur.format.defaultFormatter.stylus": "stylus-supremacy","vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatter.ts": "prettier","vetur.format.options.tabSize": 2,"vetur.format.options.useTabs": false,"vetur.format.defaultFormatterOptions": {"js-beautify-html": {// js-beautify-html settings here},"prettier": {// Prettier option here"semi": false,"singleQuote": true,"indent_size": "4","indent_char": " ","max_preserve_newlines": "5","preserve_newlines": true,"keep_array_indentation": false,"break_chained_methods": false,"indent_scripts": "normal","brace_style": "collapse","space_before_conditional": true,"unescape_strings": false,"jslint_happy": false,"end_with_newline": false,"wrap_line_length": "0","indent_inner_html": false,"comma_first": false,"e4x": false,"indent_empty_lines": false}},"editor.codeActionsOnSave": {"source.fixAll": true},"eslint.format.enable": true,// -----------vetur 、 prettier结合配置eslint配置end ----------------------"editor.wordWrap": "on","terminal.integrated.rendererType": "dom","sync.gist": "","sync.autoDownload": false,"sync.autoUpload": false,"sync.forceUpload": true,// 修改作者"fileheader.Author": "Tommy·Yang","fileheader.LastModifiedBy": "Tommy·Yang","explorer.confirmDelete": false,
}


这些配置好之后需要自定配置规范的可以到eslint官网进行查阅&＃xff0c;并在.eslintrc.js文件中进行相关规则的配置。

我给大家看看配置后的效果&＃xff0c;基本上每次自动报错都保存的时候都会修复

最后说明一点&＃xff0c;如果你的项目中之前忘记加了eslint&＃xff0c;这时候你的项目文件会有很多eslint报错信息&＃xff0c;那么此时你可以执行yarn lint / npm run lint 命令可以修复大部分eslint报错。