第一篇，VScode插架以及配置项

 

由于在开发的时候我们经常因为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"

}

 

看完的兄弟姐妹记得点赞哦~！