ESLint 配置文档-FunTeaLearn Online Web Tutorials

ESLint 是一个用于在 JavaScript 代码中发现问题的工具，它可以识别出代码中的潜在错误、不一致的代码风格以及优化机会。本文将介绍如何正确配置 ESLint，并给出一些常用的配置示例。

安装 ESLint

可以使用 npm 进行安装：

npm install eslint --save-dev

此外，还需要安装相应的插件，例如 eslint-plugin-react、eslint-plugin-vue，具体插件根据项目特点而定。

配置文件

ESLint 的配置文件是一个纯 JavaScript 文件。可以在项目根目录下创建 .eslintrc.js 或者 .eslintrc.json 文件来配置它。

下面是一个 .eslintrc.js 文件的示例：

-- -------------------- ---- -------
-------------- - -
  ---- -
    -------- -----
    ------- -----
    ----- -----
  --
  -------- -
    ---------------------
    ---------------------------
  --
  -------------- -
    ------------- -
      ---- -----
    --
    ------------ ---
    ----------- ---------
  --
  -------- -
    --------
  --
  ------ -
    ------------------- ------
  --
--

配置文件中的重要配置项有：

env

用于针对不同的 JavaScript 环境进行配置。常见的环境有 browser、node、commonjs 等。这些配置项可以决定 ESLint 需要关心哪些全局变量。

extends

用于引入规则的集合，例如 eslint:recommended、plugin:react/recommended 等。eslint:recommended 是 ESLint 内置的一套默认规则集合，而 plugin:react/recommended 是用于检查 React 项目的插件。

parserOptions

用于设置解析器选项，例如 ecmaFeatures、ecmaVersion、sourceType 等。ecmaFeatures 可以开启对新特性的支持，ecmaVersion 指定使用的 ECMAScript 版本，sourceType 可以指定使用 module 还是 script。

plugins

用于引入插件，例如 react、vue 等。每个插件都有相应的规则可以使用。

rules

用于针对代码风格、潜在错误进行规则指定。例如 no-unused-vars 可以检查未使用变量，react/prop-types 可以检查组件的 props 是否正确。

常用配置示例

Airbnb 风格指南

airbnb/javascript 是一个广为使用的 JavaScript 风格指南。我们可以使用 eslint-config-airbnb 这个包来配置。

安装：

npm install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --save-dev

module.exports = {
  extends: 'airbnb',
};

TypeScript

对于 TypeScript 项目，需要使用 @typescript-eslint 插件来检查 TS 代码，同时需要关闭对 JS 文件的检查。

安装：

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

-- -------------------- ---- -------
-------------- - -
  ------- ----------------------------
  -------- -
    ----------------------------------------
  --
  -------- -
    ---------------------
  --
  ------ -
    --------------------------------------------------- ------
    ------------------------------- --------- - ----------- -------- ---
  --
--

Vue.js

Vue.js 项目中，可以使用 eslint-plugin-vue 插件来检查 Vue 单文件组件中的代码。

安装：

npm install eslint-plugin-vue --save-dev

-- -------------------- ---- -------
-------------- - -
  -------- -
    -------------------------
  --
  -------- -
    ------
  --
  ------ -
    ------------------------------ --------- - ----------- - ---
    ------------------------- ------
  --
--

React Native

类似于 React 项目，React Native 项目也可以使用 eslint-plugin-react 插件来检查。

安装：

npm install eslint-plugin-react eslint-plugin-react-native --save-dev

-- -------------------- ---- -------
-------------- - -
  -------- -
    ---------------------------
    --------------------------
  --
  -------- -
    --------
    ---------------
  --
  ------ -
    ------------------- ------
    ------------------------------------ ------
  --
--

结语

ESLint 是一个非常强大的工具，可以帮助我们检查代码并遵循一定的代码风格规范。希望本文对您进行 ESLint 配置提供了帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/678228c1935627c900fa27bd

ESLint 配置文档