由于在开发的时候我们经常因为ESLint规范把自己搞的头晕眼花，修改起来又很浪费时间。所以我特别做个记录，如下代码可以轻松搞的。
工欲善其事必先利器，如果想要在开发的道路上如履平地必须要有得心顺手的开发工具，个人做前端开发比较喜欢使用VScode。
团队协作时，保证一致的代码风格是非常重要的，这样团队成员才可以更快地修改代码，而不需要每次去适应新的风格。
个人推荐
- [ESLint] (http://eslint.org/)
打开VScode找到settings.json
首选项 — 右上角{}
如下代码直接复制进去，可以实现代码自动补全。
{
"git.autofetch": true,
//配置eslint
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
// 写 stylus 时插入冒号
"stylusSupremacy.insertColons": false,
// 写 stylus 时插入分号
"stylusSupremacy.insertSemicolons": false,
// 写 stylus 时插入大括号
"stylusSupremacy.insertBraces": true,
// 并列的选择器新加一行
"stylusSupremacy.insertNewLineBetweenSelectors": true,
// 样式块中间空行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"window.zoomLevel": 0,
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"breadcrumbs.enabled": false,
"workbench.iconTheme": "material-icon-theme"
}
看完的兄弟姐妹记得点赞哦~！