1. 安装 ESLint 扩展

首先,打开 VSCode 扩展面板并搜索 ESLint 扩展,然后点击安装

2. 项目安装eslint

yarn add eslint -D

3. 设置eslint配置

npx eslint --init

生成.eslintrc.js (记得把依赖安装一下喔)

4. 设置eslint插件的配置(在项目级别或者全局级别设置)

在项目级别,我们需要新建一个文件.vscode/settings.json

{
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"eslint.autoFixOnSave": true
}

在全局的话

文件 --> 首选项 --> 设置

把刚才的json粘贴进去

5. 重启一下,然后愉快的保存,自动格式化

ctrl+shift+p 输入reload window

vscode集成eslint的更多相关文章

  1. 踩坑:VScode 集成 eslint 插件

    本文以 Vue 官方脚手架 Vue-cli 为例: 1. 创建 Vue 项目 注意:Vue-cli 默认给出了 eslint 配置,一路回车即可.最后在安装模块的时候,选择直接安装!我用淘宝镜像安装时 ...

  2. VSCode 使用 ESLint + Prettier 来统一 JS 代码

    环境: VSCode 1.33.1 Node.js 8.9.1 一.ESLint 1.介绍 ESLint是最流行的JavaScript Linter. Linter 是检查代码风格/错误的小工具.其他 ...

  3. 在使用 vscode 时 eslint 检测 .vue 文件中的less 部分内容

    问题: 在使用 vscode 以及 eslint 来检测 基于 webpack 的 vue-cli 的项目中,eslint 无法检测到 .vue 文件中的less 部分内容. 解答: 1.通过 下载 ...

  4. vscode 集成 cygwin 的注意事项

    vscode 集成 cygwin vscode 现在是我的主力开发编辑器,它自带 terminal 不需要我各种切换,我还想要在 windows 下执行一些简单的 .sh 文件.所以,我希望有一款工具 ...

  5. NodeJS,MongoDB,Vue,VSCode 集成学习

    NodeJS,MongoDB,Vue,VSCode 集成学习 开源项目地址:http://www.mangdot.com

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

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

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

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

  8. Webpack干货系列 | 在 Webpack 5 集成 ESLint 的方法

    程序员优雅哥(youyacoder)简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解运用Webpack 5 中集成 ESLint 的方 ...

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

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

随机推荐

  1. HTML中关于动态创建的标签无法绑定js事件的解决方法:.on()方法的 [.selector]

    在前端页面的时候,会经常遇到用JavaScript动态创建出来的Button按钮或其他标签无法使用点击事件的问题.如下代码,使用jquery在body中动态创建一个class为demo的Button按 ...

  2. maven项目打包和编译跳过单元测试和javadoc

    代码中可能由于单元测试.注释(方法中的参数)或者maven javadoc插件的问题导致无法打包,影响工作,为避免这两种情况可以在打包时输入命令: mvn clean install -Dmaven. ...

  3. element-ui组件,全选树节点,新增数据子节点数据,出现回填问题

    案情分析:全选后父节点被选中保存,在这个树节点下新增数据时,就会出现,也被选中,事实上数据是没有被选中,也就意味着权限未被配置,而显示是已经配置了,显然这个是一个bug 1.处理前,直接用下面的方法很 ...

  4. Image Processing and Analysis_15_Image Registration:Image matching as a diffusion process: An analogy with Maxwell's demons——1998

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...

  5. python3和python2共存

    在window上同时安装py3.5和py2.7,但是命令行敲击python命令后,默认只出现py2.7的信息,敲击python3命令,提示未知的命令. 从网上查了一下,虽然环境变量都添加对了,但是可执 ...

  6. 01 Windows编程——Hello World

    源码 #include "stdafx.h" #include<Windows.h> int WINAPI WinMain(HINSTANCE hInst,HINSTA ...

  7. C++——数组形参退化为指针

    数组做形参退化为指针 如果数组作为函数参数,则数组形参会退化为指针,以下代码在编译器看来是等价的 ]); ]); void fun3(int a[]); void fun4(int *a); #inc ...

  8. sql/pl 安装并连接Oracle数据库

    1,首先,先下载pl/sql devloper 安装包.下载对应版本的安装包 下载地址  https://www.allroundautomations.com/bodyplsqldevreg.htm ...

  9. 【1 封新邀请】想跟谷歌、七牛、kyligence 等大佬面对面的交流吗?

    2020 年 1 月 4 日 - 5 日,"ECUG Con 2020"大会将于杭州举行.本次大会以"ECUG For Future"为主题,围绕五大技术主题, ...

  10. Java集合--Collection

    概要 首先,我们对Collection进行说明.下面先看看Collection的一些框架类的关系图: Collection是一个接口,它主要的两个分支是:List 和 Set. List和Set都是接 ...