VSCode ESLint 配置:让你的代码更规范也更省心

本文介绍了如何在 VSCode 中配置 ESLint,帮助开发者统一代码风格、提升代码质量。内容包括安装 ESLint 插件、创建配置文件、设置保存自动修复功能、常用规则的配置方式,以及如何查阅 ESLint 官方文档来自定义规则。

用 Apifox,节省研发团队的每一分钟

VSCode ESLint 配置:让你的代码更规范也更省心

免费使用 Apifox

相关推荐

最新文章

API

一体化协作平台

API 设计

API 文档

API 调试

自动化测试

API Mock

API Hub

立即体验 Apifox
目录

写代码有时候写着写着就容易“放飞自我”,尤其是项目一多、人一杂,风格不统一的问题就暴露出来了。这个时候,ESLint 就是个好帮手,它就像一个自动化的代码检查员,帮你把那些不规范的地方统统标出来。

   
VSCode 里配置 ESLint,其实挺简单的,但一开始可能有点懵,特别是各种插件和配置文件的关系。今天我就来聊聊我是怎么一步步搞定它的。

 

安装 ESLint

插件首先,在 VSCode 里得先装个 ESLint 插件。打开扩展商店(就是左边那个图标),搜 ESLint,找到由 Microsoft 官方维护的那个,点击安装。

VSCode ESLint 配置

装完之后,你会发现代码编辑区域旁边可能会有小红点或者波浪线提示错误了,但这时候可能还没生效,因为还没有配置规则。

 

初始化 ESLint 配置文件


接下来就是在你的项目根目录下创建 .eslintrc.js 或者 .eslintrc.json 文件。这个文件就是 ESLint 的核心配置,告诉它你要用什么规则来检查代码。

 
你可以手动创建,也可以运行命令自动生成:

npx eslint --init


这个命令会引导你选择一些选项,是否需要支持 TypeScript,要不要做代码格式化等等。

VSCode ESLint 配置


生成后你会看到类似这样的内容(以 JavaScript 格式为例):

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    // 这里可以自定义规则
  },
};

 

安装依赖(特别是用了 TypeScript)


如果你用了 TypeScript,记得还要安装一些额外的依赖包:

npm install eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev


否则 ESLint 可能识别不了你的 .ts.tsx 文件。

 

VSCode 设置中开启保存自动修复


为了让 ESLint 更好用,建议在 VSCode 的设置里开启保存时自动修复的功能。打开设置(可以通过 Ctrl + , 快捷键,Mac 是 Command + , ),搜索:

  • ESLint: Auto Fix On Save —— 开启它,保存代码时就会自动修复可修复的问题。
  • Editor: Code Actions On Save —— 确保里面有 "source.fixAll.eslint": true


这样每次保存的时候,ESLint 都会自动帮你整理代码格式,再也不怕缩进乱七八糟了。

VSCode ESLint 配置

 

ESLint 规则怎么配才顺手?


配置文件中最关键的部分就是 rules 字段。你可以在这里一条条地设置每条规则的行为,通常有三个级别:

  • "off"0:关闭这条规则
  • "warn"1:启用,显示为警告(不影响编译)
  • "error"2:启用,显示为错误(可能导致构建失败)


举几个常用的例子:

 

强制使用单引号

quotes: ['error', 'single']

 

不允许 console.log

'no-console': 'warn'

 

缩进用两个空格

indent: ['error', 2]

 

函数前后要有空格

'space-before-function-paren': ['error', 'always']

 

自动修复格式问题(配合 Prettier 使用)

如果你还用了 Prettier 来格式化代码,可以在 extends 中加上 'prettier',然后在 .prettierrc 文件中配置格式规则。

extends: [
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended',
  'prettier'
]


这样 ESLint 和 Prettier 就能和平共处,一边检查规则,一边格式化代码。

 

这些规则哪里来的?官方文档在哪?


这些规则并不是我随便写的,它们都来自 ESLint 官方文档,是经过社区广泛验证和使用的标准规则。

 

ESLint 官方文档地址


👉 https://eslint.org/docs/latest/


这是 ESLint 的最新版本文档主页。你可以在这里搜索任意规则,比如:

 

怎么查规则?

  1. 打开 ESLint 官网;
  2. 在左侧菜单栏点击 “Rules”;
  3. 你会看到一个长长的规则列表,按字母排序;
  4. 点击任意规则名称,就能进入详细说明页。

 
每个规则页面通常包含以下信息:

  • Rule Details:这条规则的作用
  • Options:支持哪些配置项
  • Examples:正确与错误的写法示例
  • Related Rules:相关规则推荐
  • Version:从哪个版本开始支持  

 

插件规则呢?比如 @typescript-eslint


如果你用了 TypeScript 或 React 这样的技术栈,还需要查看插件提供的规则,比如:


这些插件扩展了 ESLint 的能力,让你可以针对特定语言或框架做更细粒度的检查。

 

常见问题处理

没有报错?


可能是 ESLint 没有正确加载配置文件,检查一下 .eslintrc 文件的位置对不对,有没有拼写错误,或者 VSCode 当前打开的是不是项目根目录。

 

报错太多不想管?


可以在配置文件里一条条关掉你不想要的规则,比如:

rules: {
  'no-console': 'off'
}


或者临时加注释忽略某一行:

console.log('test') // eslint-disable-line


总之,ESLint 是一个非常实用的工具,配合 VSCode 使用起来也非常顺手。虽然一开始配置可能有点麻烦,但一旦配好了,写代码真的舒服很多,也能避免很多低级错误。

开发必备:API 全流程管理神器 Apifox

介绍完上文的内容,我想额外介绍一个对开发者同样重要的效率工具 —— Apifox。作为一个集 API 文档API 调试API 设计API 测试API Mock自动化测试等功能于一体的 API 管理工具,Apifox 可以说是开发者提升效率的必备工具之一。

 
如果你正在开发项目需要进行接口调试,不妨试试 Apifox。注册过程非常简单,你可以直接在这里注册使用

Apifox



注册成功后可以先看看官方提供的示例项目,这些案例都是经过精心设计的,能帮助你快速了解 Apifox 的主要功能。

 
使用 Apifox 的一大优势是它完全兼容 PostmanSwagger 数据格式,如果你之前使用过这些工具,数据导入会非常方便。而且它的界面设计非常友好,即使是第一次接触的新手也能很快上手,快去试试吧!

Apifox