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. Spring Boot Redis 分布式缓存的使用

    一.pom 依赖 <!-- 分布式缓存 --> <dependency> <groupId>org.springframework.boot</groupId ...

  2. leetcode --165--php

    class Solution { /** * @param String $version1 * @param String $version2 * @return Integer */ functi ...

  3. py datetime

    python datetime模块strptime/strptime format常见格式命令- [python]2011-12-23   版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本 ...

  4. 前端开发 Vue -3axios

    Axios是什么? 应该念“阿克希奥斯”……但是太长太拗口,我一般念“阿笑斯”…… Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get.post请求.说到get.po ...

  5. Xamarin开发综述

    https://blog.csdn.net/qq_41647999/article/details/84844357 一. 前言这十来天对Xamarin的学习踩了很多的坑,说来也是一把心酸泪,下面为大 ...

  6. siamese跟踪论文思考

    转载自:https://zhuanlan.zhihu.com/p/34222060 通过作者在专栏里面放的几张响应图我们可以看到:SiamFC并不能区分不同的物体,图片上所有具有语义信息的物体都会得到 ...

  7. main函数前后

    void f1(void)__attribute__((constructor)); void f2(void)__attribute__((destructor)); void f1(void) { ...

  8. man 手册--nc

    man 手册--nc NCAT(1) Ncat Reference Guide NCAT(1) NAME ncat - Concatenate and redirect sockets SYNOPSI ...

  9. page页面403

    nginx 没有监听内网地址 必须要用域名访问

  10. VMware Workstation 14 安装使用 (小白安装使用教程)

    在一台 PC 上运行多个操作系统,借助 VMware Workstation Pro,您可以在同一台 Windows 或 Linux PC 上同时运行多个操作系统.创建真实的 Linux 和 Wind ...