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. 再谈.NET委托(delegate、Func<>)

    为了演示委托,我们先来定义一个方法:public static bool IsTen(int i){    return i == 10 ? true : false;} 如果要用自定义委托,则需要声 ...

  2. Linux基本命令 vi操作和插件

    基本命令 vim命令 常用插件 基本命令 查看Tomcat日志: tail -n 20 -f catalina.out 查看指定列表: find ./ -name 'ser*' 搜索指定文件: loc ...

  3. 初学VUE 走马灯效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 移动端适配flexible.js

    npm install lib-flexible --save npm install px2rem-loader --save-dev

  5. 【Salesforce】入门篇

    Salesforce.com 一开始是一个云端的销售自动化(Sales Force Automation, SFA)以及客户关系管理工具(Customer Relationship Managemen ...

  6. 3.通道 Channel

    一.通道(Channel):由java.nio.channels包定义的 .Channel 表示 IO 源与目标打开的连接. Channel 类似于传统的 ‘流’.只不过 Channel 本身不能直接 ...

  7. 【Hibernate】抓取策略

    一.区分延迟和立即检索 二.类级别检索和关联级别检索 一.区分延迟和立即检索 立即检索: 当执行某行代码的时候,马上发出SQL语句进行查询. get() 延迟检索: 当执行某行代码的时候,不会马上发出 ...

  8. 持续集成工具FinalBuilder使用心得

    FinalBuilder 使用这款自动化创建和发布管理工具,软件开发者可以定义和维护一个可靠的以及可重复创建的程序.FinalBuilder包括集成的带有版本的控制系统,文件和目录选项,重复器,源代码 ...

  9. docker在Linux环境下的安装

    在Centos6.8上安装 一.查看系统版本 二.安装EPEL 因为系统自带的repo中不带docker需要安装epel rpm -Uvh http://dl.fedoraproject.org/pu ...

  10. idou老师教你学Istio 24:如何在Istio使用Prometheus进行监控

    使用Prometheus进行监控是Istio提供的监控能力之一.Istio提供丰富的监控能力,为网格中的服务收集遥测数据.Mixer是负责提供策略控制和遥测收集的Istio组件. Istio通过Mix ...