最近一直在学习开发一个VUE项目,几乎没有前端基础摸爬滚打,就一边摸索HTML,JS,CSS一边模仿着已有代码开发,也还算能学到东西。

  VSCode确实还不错,很轻量。在刚开始学写vue的时候,后台总是报各种错,什么空格多了少了,缩进不对,没用驼峰命名法都报错,很让人崩溃。后来才知道有个叫ESLint的东西:

官网入口:https://cn.eslint.org/

   用了一段时间过后,觉得书写规范这个东西还是很重要的,之前写代码的时候,虽然也在意过,不过像这样严格的提醒是没有的,有时候也不注意了。

   不过好归好,每次代码写完跳出来十几个甚至几十个红色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风格审查的更多相关文章

  1. 在VSCode中配置Eslint格式化

    在VSCode中配置Eslint 格式化时使代码保持Eslint语法规范 安装Eslint以及prettier美化插件 在VSCode配置设置项中添加如下代码 { "workbench.co ...

  2. 在vscode中使用eslint

    一.vs中安装eslint插件 二.npm 全局安装 eslint   sudo npm i -g eslint 三.vs终端运行eslint --init 四.在vscode的setting中设置 ...

  3. 在vscode中使用eslint+prettier格式化vue项目代码 (转载)

    ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...

  4. vscode 中 eslint prettier 和 eslint -loader 配置关系

    前置 本文将探究 vscode prettier 插件 和 eslint 插件在 vscode 中的配置以及这两者对应的在项目中的配置文件的关系,最后提及 vscode eslint 插件配置与 es ...

  5. vscode中如何加eslint检查工具

    代码的质量对开发人员个人的成长以及公司的发展至关重要,所以如何使用把控代码的质量是大家经常思考的问题.除了代码审核之外,代码检查工具成了把控代码质量的第一道门槛,非常好用,可以建立一些团队约定的代码风 ...

  6. vscode代码保存时自动格式化成ESLint风格(支持VUE)

    一.问题 vscode的默认的代码格式化ctrl+shift+f 无法通过eslint的代码风格检查是一个非常蛋疼的问题 同样在进行vue项目开发的时候,使用eslint代码风格检查是没啥问题的,但是 ...

  7. vscode 代码保存时自动格式化成 ESLint 风格

    vscode 的默认的代码格式化 alt+shift+f (windows) 无法通过 eslint 的代码风格检查,,, 比如: 4个空格和2个空格(ESLint) 字符串用单引号(ESLint) ...

  8. Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南

    Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...

  9. eslint 在VSCode中不能使用

    在VSCode中安装号eslint插件,还是不能使用,还需安装 npm install eslint-plugin-promise --save-dev 我也不知道为什么?我现在只是用两天不到vsco ...

随机推荐

  1. atxserver2-rethinkdb的一些基础操作

    因为我只需要一些基础操作就好,所以在web端的 Data Explorer 操作,首先启动  rethinkdb.exe,然后登陆网页端, 下面是一些基础操作的语句, 一.创建表r.db(‘atxse ...

  2. Registry key 'Software\JavaSoft\Java Runtime Environment\CurrentVersion' has value '1.8', but '1.7'

    第一种方法:安装1.8之前安装了1.7,将1.7卸载就好了. 第二种方法:删掉Windows\System32下的java.exe, javaw.exe 就行了,但是安装的1.8的jdk会回到1.7的 ...

  3. Codeforces 981 共同点路径覆盖树构造 BFS/DP书架&最大值

    A /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define pb push_bac ...

  4. nginx代理证书使用方法

    一.证书购买 一般情况,申请证书时需要添加DNS解析,具体的步骤一般运营商都会给予详细说明.当然,也需要填写证书保护的处理的域名,一般非免费的证书可以支持多个域名处理,免费的一般只能支持一个域名的设置 ...

  5. iOS控件圆角与半圆角

    开发过程中难免用到圆角以及恶心的半圆角,看代码 半圆角:这是把左边的两个角切成了圆角 UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoun ...

  6. tensorboard_embedding

    from tensorboardX import SummaryWriter import torchvision writer=SummaryWriter(log_dir="embeddi ...

  7. 枚举类enum应用以及注解@transient应用

    1.增加枚举类 public enum RightTypeEnum { AUTHORITY("访问权限") private String type; RightTypeEnum(S ...

  8. 一、redis安装、配置、命令

    一.安装 参见:redis中文官方文档 “http://www.redis.cn/download.html” 下载.解压.编译Redis $ wget http://download.redis.i ...

  9. Hibernate实体对象的生命周期(三种状态)

    瞬时状态(Transient) 通过new创建对象后,对象并没有立刻持久化,它并未与数据库中的数据有任何关联,此时Java对象的状态为瞬时状态. Session对于瞬时状态的Java对象是一无所知的, ...

  10. Eclipse修改背景颜色(豆沙绿)

    操作界面默认颜色为白色.对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些.设置方法如下: 1.打开window->Prefere ...