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
vscode自动修复eslint规范的插件及配置相关推荐
- vscode 新版eslint自动修复_vscode自动修复eslint规范的插件及配置
在开发大型项目中,经常都是需要多人合作的.相信大家一定都非常头疼于修改别人的代码的吧,而合理的使用eslint规范可以让我们在代码review时变得轻松,也可以让我们在修改小伙伴们的代码的时候会更加清 ...
- VSCode好用的Python插件及配置
MS Python插件. 这是微软官方的Python插件,已经自带很多功能.下面是插件功能描述,其中部分内容我做了翻译. a) Linting (Prospector, Pylint, ...
- 关于VSCode安装 python 语法检测器插件 pylint 配置(Mac)
1.安装python插件 2.安装pylint 语法检测器 pip3 install pylint # 可以用下面的命令查看pylint的安装位置 which pylint # /usr/local/ ...
- vscode 使用eslint(保存自动格式化)
前提:在package.json中安装了eslint的依赖 1.在项目跟目录添加.eslintrc.js 文件 // https://cn.eslint.org/docs/rules/ // /** ...
- vscode插件及配置
温馨提示:如果懒得看后面的内容,点这个链接也行, 必备插件yyds vscode必备插件 基础插件Chinese 中文包open in browser 在浏览器打开Auto Close Tag 自动闭 ...
- vscode 安装 eslint 插件
1. eslint 插件 的好处 在我们编写代码时,eslint 插件 会自动纠正我们错误的写法. 比如,当我们编写不符合eslint规范的代码时,启动项目会报错,而且代码里会报红. eslint 插 ...
- vsCode配置Eslint+Prettier结合使用详细配置步骤,规范化开发
一.eslint eslint它规范的是代码偏向语法层面上的风格.本篇文章以一个基本的vue项目,来说明eslint+prettier+husky配置项目代码规范,为了更好的描述本文, ...
- vscode编辑如何保存时自动校准eslint规范
在日常开发中,一个大点的项目会有多人参与,那么可能就会出现大家的代码风格不一,各显神通,这个时候就要祭出我们的eslint. 在这之前磨刀不误砍柴工,我们先来配置一下我们的代码编辑工具,如何在vsco ...
- 踩坑:VScode 集成 eslint 插件
本文以 Vue 官方脚手架 Vue-cli 为例: 1. 创建 Vue 项目 注意:Vue-cli 默认给出了 eslint 配置,一路回车即可.最后在安装模块的时候,选择直接安装!我用淘宝镜像安装时 ...
最新文章
- 今天是第一次开博客,for--futurechild!!!
- 5G NGC — NWDAF 网络智能分析功能
- zabbix snmp 协议监控 dell iRDAC
- mysql经常问到的面试题_20道BAT面试官最喜欢问的JVM+MySQL面试题(含答案解析)...
- [jQuery] Zepto的点透问题如何解决?
- 怎样高效入门 Vue?
- 【Linux入门学习之】数据流重定向
- android studio卡顿解决方案
- 算法-求二进制数中1的个数
- 解决窗口桌面管理器内存占用过高,系统更新,核显驱动异常造成的内存泄漏问题。
- js 如何实现点击一键复制文本
- 学测试,看视频?NONONO,除非这种情况
- python求两个数的最大公约数_python中求最大公约数的三种方法
- 【每日力扣Leetcode】459-判断一个字符串是否由子字符串重复组成
- BPMN,BPEL,XPDL
- datax(二)datax on azkaban架构设计之datax as a service
- Oracle Rac 添加节点测试笔记
- Python 解析爬取的车次数据(12306)
- 基于RGB-D图像的视觉里程计连续尺度空间直接图像对齐 (ICRA 2021)
- 支付宝:验签出错,建议检查签名字符串或私钥与应用公钥是否匹配,网关生成的验签字符串为...