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. Linux yum安装java环境

    1.jdk 1.8 #系统版本 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) #安装 ...

  2. (一)Activiti简介

    一.概念 Activiti项目是一项新的基于Apache许可的开源BPM平台,从基础开始构建,旨在提供支持新的BPMN 2.0标准,包括支持对象管理组(OMG),面对新技术的机遇,诸如互操作性和云架构 ...

  3. 数据仓库之抽取数据:通过openrowset执行存储过程

    原文:数据仓库之抽取数据:通过openrowset执行存储过程 在做数据仓库时,最重要的就是ETL的开发,而在ETL开发中的第一步,就是要从原OLTP系统中抽取数据到过渡区中,再对这个过渡区中的数据进 ...

  4. SQL Server系统函数:系统信息函数

    原文:SQL Server系统函数:系统信息函数 1.会话id,服务器信息.用户信息 select @@SPID, --返回当前连接的会话ID:SPID @@servername, --SQL Ser ...

  5. Html5+Mui前端框架,开发记录(四):下拉菜单绑定数据、搜索、时间控件

    1.下拉菜单绑定数据,选择后回传值 1)html: <div class="mui-input-row"> <label>xxx:</label> ...

  6. Windows群集之NLB【转】

    本文转自:http://www.talkwithtrend.com/Article/31746 网络负载平衡群集(Network Load balancing) 在Internet快速发展的今天,为了 ...

  7. 解决tensorflow 调用bug Running model failed:Invalid argument: NodeDef mentions attr 'dilations' not in Op<name=Conv2D; signature=input:T, filter:T ->

    将tensorflow C++ 版本更新为何训练版本一致即可

  8. # JDK7+ MethodHandle

    简单例子 import java.lang.invoke.MethodHandle; import java.lang.invoke.MethodHandles; import java.lang.i ...

  9. git remote 使用总结

    使用场景:新建一个git仓储并与远程关联 1.初始化一个新的空的git仓储,并在仓储下做一些改动 mkdir gitDir cd gitDir/ git init touch file git sta ...

  10. SAP Marketing Cloud的Contact导入配置和数据合并原理

    SAP很多系统的主数据都支持从外部系统导入,SAP Marketing Cloud也是如此,contact主数据可以来自Hybris Commerce,CRM,ERP或者Twitter,Faceboo ...