在开发大型项目中，经常都是需要多人合作的。相信大家一定都非常头疼于修改别人的代码的吧，而合理的使用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, // 使用带引号替代双引号

VSCode好用的Python插件及配置

MS Python插件. 这是微软官方的Python插件,已经自带很多功能.下面是插件功能描述,其中部分内容我做了翻译. a)        Linting (Prospector, Pylint,  ...

vscode安装eslint插件，代码统一自动修复

ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package. ...

vscode中eslint插件的配置-prettier

用vue-cli构建vue项目,会有个eslint代码检测的安装 可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f) 这时候要在vscode上装一个esli ...

VSCode配合ESLint自动修复格式化

开发Vue或者React的项目的时候,我们经常用到ESLint进行代码的校验,当代码出现不符合规范的格式的时候,ESLint会在控制台提示相关的异常信息. ESLint极大的提高了团队代码的一致性和规 ...

vue eslint 规范配置

vue eslint 规范配置 为了代码格式统一,避免一些低级或者不合理的错误,现强行使用eslint的 standard规范 项目配置 目前都是使用 vue 提供的脚手架进行开发的,虽然 vue-c ...

VScode eslint-plugin-vue 自动修复eslint报错

1.安装插件 npm i -g eslint-plugin-vue 2.修改项目跟路径下的文件:.eslintrc | .eslint.js 3.添加eslint 和 vetur 插件 4.修改vsc ...

使用vscode开发vue cli 3项目，配置eslint以及prettier

初始化项目时选择eslint-config-standard作为代码检测规范,vscode安装ESLint和Prettier - Code formatter两个插件,并进行如下配置 { " ...

vscode保存代码，自动按照eslint规范格式化代码设置

# vscode保存代码,自动按照eslint规范格式化代码设置 编辑器代码风格一致,是前端代码规范的一部分.同一个项目,或者同一个小组,保持代码风格一致很必要.就拿vue项目来说,之前做的几个项目, ...

随机推荐

HTML5新特性之Mutation Observer

Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动时,Mutation Observer会得到通知. 要概念上,它很接近事件.可以理解为,当DOM发生变 ...

c# applibrary实现一个Sheet表中存放多张DataTable数据

1.工具类(applibrary.dll) public class ExcelHelper { /// /// 文件名 /// pu ...

GDB调试汇编栈堆过程的学习

前期调试 我的程序代码是: 首先,用gcc g gdb.c -o gdb -m32产生32位汇编. 输入gdb gdb进入gdb调试器 在main函数处设置一个断点:b main 用disassemb ...

MySql密码丢失

windows下mysql密码忘记了 第一步:netstat -nat(可以查看mysql是否启动了,如果启动了,可以用输入net stop mysql(或者通过任务管理器结束进程)) 第二步:my ...

PHP获取客户端操作系统，浏览器，语言，IP，IP归属地等

docker 进阶

docker 常用命令: docker  pull hub.c.163.com/library/mysql:latest  #这是从网址下载下来mysql镜像 docker run  -d -p 88 ...

mysql 关联

自关联 设计省信息的表结构provinces id ptitle 设计市信息的表结构cityscitys表的proid表示城市所属的省,对应着provinces表的id值 id ctitle proi ...

ssh Socket error Event: 32 Error: 10053.

在家用的WiFi,把电脑从房间搬到餐厅来用发现用我的xshell不能用ssh连接了,报错Socket error Event: 32 Error: 10053.同时在自己物理机上ipconfig看到自 ...

Spring解决Hibernate中的懒加载问题

OpenSessionInViewFilter 过滤器将 Hibernate Session 绑定到请求线程中,它将自动被 Spring 的事务管理器探测到.        ...

java 获得字符串中最大重复子串长度

参考:http://blog.csdn.net/csdn_yaobo/article/details/50338025 要找一串字符串中,重复的字串长度,.例如ABCX1&ABC,中ABC重复 ...