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

vscode自动修复eslint规范的插件及配置的更多相关文章

  1. VSCode好用的Python插件及配置

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

  2. vscode安装eslint插件,代码统一自动修复

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

  3. vscode中eslint插件的配置-prettier

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

  4. electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

  5. VSCode配合ESLint自动修复格式化

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

  6. vue eslint 规范配置

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

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

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

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

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

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

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

随机推荐

  1. vue-cli4.0脚手架安装

    10月16日,官方发布消息称Vue-cli 4.0正式版发布,并且强烈建议升级;小编也是刚刚安装了最新版本的脚手架看看更新了什么 安装和vue-cli3.0的是一模一样的,对比了一下3.0的脚手架,除 ...

  2. c++-类与类的关系

    类与类的关系 #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace std; class A { publ ...

  3. AI: Web: 1 Vulnhub Walkthrough

    下载链接: https://www.vulnhub.com/entry/ai-web-1,353/ 主机发现扫描: 主机端口扫描 http://10.10.202.158/ 目录扫描: ╰─ sudo ...

  4. Centos 中使用通过docker 部署.netcore

    此前,我一直觉得,目前网络上的各种各样的技术文章.技术文档已经足够多,任何一种技术,都可以或多或少的在网络上找到教程,或者在qq群里找到前辈解答.所以,我觉得自己在博客上写文章的意义甚少.甚至觉得自己 ...

  5. js-03-if条件判断

    一.swich case判断语句eg <script> swich( exp){ case 值1: 执行的代码段: break; case 值2: 执行的代码段: break; ..... ...

  6. 嵌入Canvas App到Dynamics 365 Customer Engagement(Model-Driven App)中,创造更多可能!

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  7. 小白到大神,你需要了解的 sqlite 最佳实践

    本文微信公众号「AndroidTraveler」首发. 背景 本文是对一篇英文文档的翻译,原文请见文末链接. 并发数据库访问 假设你实现了自己的 SQLiteOpenHelper. public cl ...

  8. Vim 命令常用功能详解

    Vim编辑器 文本编辑器 , 字处理器ASCIIvi:Visual Interface vim :VI iMproved 全屏编辑器,模式化编辑器vim 模式:编辑模式(命令模式)输入模式末行模式 模 ...

  9. PS各种行业文件创建

    ps可以运用于:印刷.喷绘.网络等行业. 印刷 创建的印刷文件需要修改为毫米为单位,分辨率300以上,CMYK颜色格式: 16开的尺寸为:210*285mm:但在印刷之后,剪裁需要留出出血位,上下左右 ...

  10. mysql学习体系

    1. MySQL的安装和配置 -- 安装的步骤 -- 配置参数的设置 -- 全局变量量与会话变量量的定义及区别 -- 常⻅见参数有哪些,有何定义,影响范围是什什么 -- 如何查看参数的值 -- 配置⽂ ...