在VSCode中开启ESLint风格审查
最近一直在学习开发一个VUE项目,几乎没有前端基础摸爬滚打,就一边摸索HTML,JS,CSS一边模仿着已有代码开发,也还算能学到东西。
VSCode确实还不错,很轻量。在刚开始学写vue的时候,后台总是报各种错,什么空格多了少了,缩进不对,没用驼峰命名法都报错,很让人崩溃。后来才知道有个叫ESLint的东西:

用了一段时间过后,觉得书写规范这个东西还是很重要的,之前写代码的时候,虽然也在意过,不过像这样严格的提醒是没有的,有时候也不注意了。
不过好归好,每次代码写完跳出来十几个甚至几十个红色error/warning还是让人很难受。从网上找了点资料,发现可以在VS里添加辅助工具。
步骤如下:
1.安装ESLint:在vscode左侧的extension处搜索ESLint并安装

2.file->preference->settings,如果不是文本框点击那个open settings(JSON)

3.在用户设置中填写如下配置:
{
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
}
好了之后,如果代码里有不规范的地方,编辑器会立刻提示出来,这样便于书写习惯的养成;
就算没改,点击保存后也会自动ESlint格式化。
在VSCode中开启ESLint风格审查的更多相关文章
- 在VSCode中配置Eslint格式化
在VSCode中配置Eslint 格式化时使代码保持Eslint语法规范 安装Eslint以及prettier美化插件 在VSCode配置设置项中添加如下代码 { "workbench.co ...
- 在vscode中使用eslint
一.vs中安装eslint插件 二.npm 全局安装 eslint sudo npm i -g eslint 三.vs终端运行eslint --init 四.在vscode的setting中设置 ...
- 在vscode中使用eslint+prettier格式化vue项目代码 (转载)
ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...
- vscode 中 eslint prettier 和 eslint -loader 配置关系
前置 本文将探究 vscode prettier 插件 和 eslint 插件在 vscode 中的配置以及这两者对应的在项目中的配置文件的关系,最后提及 vscode eslint 插件配置与 es ...
- vscode中如何加eslint检查工具
代码的质量对开发人员个人的成长以及公司的发展至关重要,所以如何使用把控代码的质量是大家经常思考的问题.除了代码审核之外,代码检查工具成了把控代码质量的第一道门槛,非常好用,可以建立一些团队约定的代码风 ...
- vscode代码保存时自动格式化成ESLint风格(支持VUE)
一.问题 vscode的默认的代码格式化ctrl+shift+f 无法通过eslint的代码风格检查是一个非常蛋疼的问题 同样在进行vue项目开发的时候,使用eslint代码风格检查是没啥问题的,但是 ...
- vscode 代码保存时自动格式化成 ESLint 风格
vscode 的默认的代码格式化 alt+shift+f (windows) 无法通过 eslint 的代码风格检查,,, 比如: 4个空格和2个空格(ESLint) 字符串用单引号(ESLint) ...
- Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...
- eslint 在VSCode中不能使用
在VSCode中安装号eslint插件,还是不能使用,还需安装 npm install eslint-plugin-promise --save-dev 我也不知道为什么?我现在只是用两天不到vsco ...
随机推荐
- Ajax轮询请求
Ajax轮询请求 什么是轮询? 轮询(polling):客户端按规定时间定时向服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. Ajax轮询需要服务器有很快的处理速度与快速响应. ...
- laravel的model
1.创建模型 $ php artisan make:model Models/Issue 2.模型的白名单机制,用于赋值 class Issue extends Model { //指定表名 pr ...
- keepalived的工作原理
keepalived的工作原理 首先简单介绍一下vrrp协议 vrrp协议 用来实现路由器冗余的协议: Vrrp协议是为了消除在静态缺省路由环境下路由器单点故障引起的网络失效而设计的主备模式的协议,使 ...
- [USACO12FEB]牛券Cow Coupons(堆,贪心)
[USACO12FEB]牛券Cow Coupons(堆,贪心) 题目描述 Farmer John needs new cows! There are N cows for sale (1 <= ...
- robotframework调用外部python多次运行拿到的都是同一个值
外部python是一个爬虫,爬取的内容的定义没有放入函数中.导致一次爬取多次使用的情况出现. 第一版函数如下: 改版后:
- linux就该这么学.pdf
链接:https://pan.baidu.com/s/1mhYIqgg 密码:ay0j
- python基础练习题6
01:求1+2!+3!+....+20!的和 s=0 t=1 for n in range(1,21): t*=n s+=t print('1!+2!+3!+.....+20!=%d'%s) 02:利 ...
- Spring Boot 整合 AOP
一.示例 1.依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...
- BZOJ - 3998 弦论 (后缀自动机)
#include<cstdio> #include<cstring> #include<queue> using namespace std; typedef lo ...
- 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
