草庐IT

vscode配置ESlint

笑拥平凡 2023-10-27 原文

文章目录

前言

最近为vsocde配置Eslint出现了许多问题， 我解决问题之后，觉得还是把这些坑都写清楚，方便学习前端的初学者。

一、什么是ESLint？

ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具

二、配置步骤

1.基础配置

这里以新建空项目为例

1. 安装eslint依赖 (可以使用npm或yarn其中的一种)

  • 使用npm
// 在终端输入下列命令
npm init -y //生成package.json
npm init @eslint/config

之后eslint就会询问一些问题(以下是我的选择, 大家可以根据实际情况修改)

1.How would you like to use Eslint? -选择第3个
2.What type of module does your project use? -选择JavaScript module
3.What framework does your project use？ -选择None of these
4.Does your project use TypeScript? -选择No
5.Where does your code run? -选择Node(按i选择)
6.How would you like to define a style for your project? -选择Use a popular style guide
7.Which style guide do you want to follow？-选择第1个
8.What format do you want your config file to be in? -选择JSON
9. 询问是否更新 -选择Yes
10.Which package manager do you want to use -选择npm

之后eslint就会根据你的选择生成配置文件.eslintrc.json，这样就完成了第一步工作

  • 使用yarn
// 在终端输入下列命令
yarn init -y //生成package.json
yarn add -D eslint
yarn eslint --init

之后的步骤,除了最后一个问题需要选择使用 yarn下载，其他都同使用npm

2.下载相关插件(在vscode扩展中下载)

  • ESLint

  • Error Lens(可选择，功能:可以显示错误信息在当前代码行后)

    效果演示:

  • 可选操作
    关闭vscode原有的对JavaScript代码的检验
    打开设置，选择工作区，输入validate，取消勾选JavaScript

完成上步骤后eslint代码检测就可以生效了

2.其他设置

1.自定义检测规则

规则有三种状态:

  • error 表示规则生效，且违反规则会报错(代码下出现红色波浪线)
  • warn 表示规则生效，且违反规则会警告(代码下出现黄色波浪线)
  • off 表示不检测此规则
// 可以在生成的.eslintrc.json中的rules: 自定义规则
// 举例:
"rules": {
        // 允许使用tab缩进
        "no-tabs":"off",
        // 允许控制台输出
        "no-console":"off",
        // 允许使用alert
        "no-alert": "off",
        // 存在未使用的变量(警告)
        "no-unused-vars":"warn",
        // 没有使用的表达式(报错)
        "no-unused-expressions":"error"  
    }

演示：

其他规则都可以在官方文档中查看，可以根据自己的需要添加或修改

2.设置脚本命令

  • 自动修复可修复的错误和显示错误
// 在package.json中的
	"scripts": {
	// 配置后在终端 使用 npm(yarn) run lint 自动修复可修复的错误
    "lint": "eslint --fix --ext .js,.jsx src(src修改为你js文件存放的位置)"
  }

演示：
运行前:

使用命令:

// 终端
npm run lint

运行后:

自动删除了多余的空行, 将字符串从“”修改为‘’，并在终端显示其他不能自动修复的错误

总结

以上就是今天要讲的内容，本文仅仅简单介绍了最基础的配置，更多的内容就需要大家自己探索。

vscodeESlintspanclasstokenjavascriptide

有关vscode配置ESlint的更多相关文章

  1. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

    我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。 最佳答案 首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg

  2. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  3. Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2

    之前在培训新生的时候，windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表，但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题)，加之暑假之后对cmake实在是爱不释手，且这样配置确实十分简单(其实都不需要配置)，故斗胆妄言vscode下配置CV之法。其实极为简单，图比较多所以很长。如果你看此文还配不好，你应该思考一下是不是自己的问题。闲话少说，直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么，我不说是谁。CMake是一个开源免费并且跨平台的构建工具，可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m

  4. 神州数码无线产品（AC+AP）配置 - 2

    注意：本文主要掌握DCN自研无线产品的基本配置方法和注意事项，能够进行一般的项目实施、调试与运维AP基本配置命令AP登录用户名和密码均为：adminAP默认IP地址为：192.168.1.10AP默认情况下DHCP开启AP静态地址配置：setmanagementstatic-ip192.168.10.1AP开启/关闭DHCP功能：setmanagementdhcp-statusup/downAP设置默认网关：setstatic-ip-routegeteway192.168.10.254查看AP基本信息：getsystemgetmanagementgetmanaged-apgetrouteAP配

  5. hadoop安装之保姆级教程（二）之YARN的配置 - 2

    1.1.1 YARN的介绍 为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的，针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜，提出了全新的资源管理框架YARN. ApacheYARN（YetanotherResourceNegotiator的缩写）是Hadoop集群的资源管理系统，负责为计算程序提供服务器计算资源，相当于⼀个分布式的操作系统平台，⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现，但是因为具有⾜够的通⽤性，同样可以⽀持其他的分布式计算模

  6. Ruby 默认将 IRB 配置为 Pretty_Inspect - 2

    我是ruby​​的新手，正在配置IRB。我喜欢pretty-print(需要'pp')，但总是输入pp来漂亮地打印它似乎很麻烦。我想做的是默认情况下让它漂亮地打印出来，所以如果我有一个var，比如说，'myvar'，然后键入myvar，它会自动调用pretty_inspect而不是常规检查。我从哪里开始？理想情况下，我将能够向我的.irbrc文件添加一个自动调用的方法。有什么想法吗？谢谢! 最佳答案 irb中默认pretty-print对象正是hirb被迫去做。Theseposts解释hirb如何将几乎所有内容转换为ascii表。虽

  7. ruby - 是否可以将 IRB 提示配置为动态更改？ - 2

    我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录，但我不知道如何在每个命令后进行提示更新。最终，我想在日常工作中更多地使用IRB，让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO

  8. ruby - 如何配置 Ruby Mechanize 代理以通过 Charles Web 代理工作？ - 2

    我正在使用Ruby/Mechanize编写一个“自动填写表格”应用程序。它几乎可以工作。我可以使用精彩CharlesWeb代理以查看服务器和我的Firefox浏览器之间的交换。现在我想使用Charles查看服务器和我的应用程序之间的交换。Charles在端口8888上代理。假设服务器位于https://my.host.com。.一件不起作用的事情是:@agent||=Mechanize.newdo|agent|agent.set_proxy("my.host.com",8888)end这会导致Net::HTTP::Persistent::Error:...lib/net/http/pe

  9. ruby-on-rails - 如果特定语言环境中缺少翻译，如何配置 i18n 以使用 en 语言环境？ - 2

    如果特定语言环境中缺少翻译，如何配置i18n以使用en语言环境翻译？当前已插入翻译缺失消息。我正在使用RoR3.1。 最佳答案 找到相似的question这里是答案:#application.rb#railswillfallbacktoconfig.i18n.default_localetranslationconfig.i18n.fallbacks=true#railswillfallbacktoen,nomatterwhatissetasconfig.i18n.default_localeconfig.i18n.fallback

  10. ruby-on-rails - 在 Rails 中存储(结构化)配置数据的位置 - 2

    对于我正在编写的Rails3应用程序，我正在考虑从本地文件系统上的XML、YAML或JSON文件中读取一些配置数据。重点是:我应该把这些文件放在哪里？Rails应用程序中是否有用于存储此类内容的默认位置？附带说明一下，我的应用程序部署在Heroku上。 最佳答案 我经常做的是:如果文件是通用配置文件:我在目录/config中创建一个YAML文件，每个环境有一个上层key如果我为每个环境(大项目)创建一个文件:我为每个环境创建一个YAML并将它们存储在/config/environments/然后我在加载YAML的地方创建了一个初始化

随机推荐