超强备忘！EsLint + styleLint 配置全攻略

2023-10-29 13:01:40

Eslint 和 styleLint 是两个流行的 JavaScript 代码风格检查工具，它们可以帮助您轻松地检查代码是否符合团队或项目的编码风格指南。Eslint主要用于检查 JavaScript 代码的语法和风格，而styleLint主要用于检查 CSS 代码的风格。

1. 安装依赖包

首先，您需要在项目中安装 Eslint 和 styleLint 的依赖包。您可以使用以下命令安装这些依赖包：

npm install eslint --save-dev
npm install stylelint --save-dev

2. 创建配置文件

接下来，您需要创建 Eslint 和 styleLint 的配置文件。您可以使用以下命令创建这些配置文件：

npx eslint --init
npx stylelint --init

这将分别在项目中创建 .eslintrc 和 .stylelintrc 配置文件。

3. 配置 Eslint

在 .eslintrc 配置文件中，您可以配置 Eslint 的各种选项。例如，您可以指定要检查的 JavaScript 代码的版本、要使用的插件和要应用的规则。

以下是一个基本的 Eslint 配置示例：

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

4. 配置 styleLint

在 .stylelintrc 配置文件中，您可以配置 styleLint 的各种选项。例如，您可以指定要检查的 CSS 代码的版本、要使用的插件和要应用的规则。

以下是一个基本的 styleLint 配置示例：

{
  "extends": ["stylelint-config-standard"],
  "plugins": [],
  "rules": {
    "indentation": 2,
    "quotes": "single",
    "no-missing-end-of-source-newline": true
  }
}