- 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
在开发前端项目的时候，如果团队形成一定规模之后，由于每个人开发习惯的不一致会造成代码混乱等问题，为了避免这样的低级问题，我们可以引入eslint并在vscode中配置自动保存。具体步骤如下： 第一步：在vsCode中下载如下插件：
第二步：在vs Code中打开setting.json配置文件，将下面内容拷贝到setting.json中，可以实现每次保存的时候自动格式化（如果之前设置过，注意进行配置项的取舍）
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
"window.zoomLevel": 0,
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"editor.renderControlCharacters": true,
"editor.renderWhitespace": "all",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
第三步：以上配置相当于全局配置，如果某个项目中不需要某些eslint校验，可以在项目中的.eslintrc.js文件中进行配置。
好了，到此配置完成，后续如果有配置优化会持续更新~
