vscode自动修复eslint规范的插件及配置

在开发大型项目中，经常都是需要多人合作的。相信大家一定都非常头疼于修改别人的代码的吧，而合理的使用eslint规范可以让我们在代码review时变得轻松，也可以让我们在修改小伙伴们的代码的时候会更加清晰。但是往往在开发过程中由于我们个人习惯的不通经常会先关掉一些eslint的属性，又或者每个人对于eslint的配置也是不一样的，所以当我们统一配置eslint之后，我们可以通过vscode或者webstorm插件配置eslint规范，自动修改关于eslint的问题。

一、eslint规范

使用vue-cli3搭建vue项目初始化时，会有选择eslint的设置，一般情况下，设置使用 'eslint:recommended'，也可以在.eslintrc.js配置其他觉得适合项目的一些eslint规范（详细eslint规则参考：https://cn.eslint.org/docs/rules/）：

module.exports = {root: true,env: {node: true,},extends: ['plugin:vue/essential','@vue/airbnb','eslint:recommended'],rules: {'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-trailing-spaces': 'error', // 禁止行尾空格'linebreak-style': [0, 'error', 'windows'],'import/extensions': 'off',"comma-dangle": ["error", "never"], // 禁止行尾逗号"semi": ["error", "never"], // 禁止分号"space-before-blocks": "error", // 强制在块之前使用一致的空格"comma-spacing": "error", // 逗号后面加空格'indent': [2, 2, {'SwitchCase': 1}], //代码首行缩进规定，switchcase的设置比较特别，如果直接设置'indent':2,使用代码自动校验会发现switch代码段无法校验通过
  },parserOptions: {parser: 'babel-eslint',},
};

 二、自动修复eslint报错

vscode安装插件vetur,prettier,eslint配置相对应的eslint规范可自动帮我们修复一些eslint报错问题，以下是一些基本的配置：

  "vetur.format.defaultFormatter.js": "prettier-eslint","vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatterOptions": {"wrap_attributes": "force-aligned"},"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// "editor.formatOnSave": true,  // 保存时自动格式化 --vscode编辑器自带自动格式化会与设置的eslint规范有所冲突导致eslint报错"eslint.autoFixOnSave": true, //保存时使用eslint规范自动格式化// 添加 vue 支持"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],"prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验 （如果未安装prettier或者不需要prettier格式化可以不用设置prettier这些属性）"prettier.semi": false,  // 去掉代码结尾的分号 "prettier.singleQuote": true,  // 使用带引号替代双引号 

收藏：https://www.haorooms.com/post/vscode_eslint

转载于:https://www.cnblogs.com/layaling/p/10821529.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！