使用 VSCode 配置 ESLint 和 Prettier 的正确姿势-JavaScript中文网-JavaScript教程资源分享门户

前言：作为前端开发工程师，代码的规范和风格对于项目的质量和维护性有很大的影响。而 ESLint 和 Prettier 是常用的代码规范和风格检查工具。本文将介绍如何在 VSCode 中配置 ESLint 和 Prettier，以及常见的问题和解决方案。

ESLint 介绍

ESLint 是一个插件化的 JavaScript 代码检查工具，可以检查代码中的错误和不符合规范的代码，并提供了很多插件来检测常见的问题，如未定义的变量、语法错误等等。它还支持在代码中实时检测，并给出相应的提示。

Prettier 介绍

Prettier 是一个代码格式化工具，可以根据一系列的规则自动格式化代码，让代码风格更加统一和规范。它可以和 ESLint 配合使用，避免重复的检查和格式化操作。

配置 ESLint 和 Prettier

在 VSCode 中配置 ESLint 和 Prettier 可以大大提高代码的规范性和可读性。具体步骤如下：

步骤一：安装扩展

首先需要安装 ESLint 和 Prettier 的扩展。在 VSCode 中按下 Ctrl+Shift+X 打开扩展界面，搜索并安装以下扩展：

ESLint
Prettier - Code formatter

安装完成后重启 VSCode。

步骤二：配置文件

在项目根目录下添加 .eslintrc.js 和 .prettierrc.js 两个配置文件。具体配置可以根据项目需求进行调整。以下是一个示例配置：

// javascriptcn.com 代码示例
// .eslintrc.js
module.exports = {
  extends: ['airbnb', 'plugin:prettier/recommended', 'prettier/react'],
  parser: 'babel-eslint',
  rules: {
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
    'react/jsx-one-expression-per-line': 0,
  },
};

// .prettierrc.js
module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
};

步骤三：配置 VSCode

在 VSCode 的设置中添加以下配置：

{
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "prettier-eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

其中，“editor.formatOnSave”用于在保存文件时自动格式化代码，“eslint.format.enable”和“prettier-eslint.enable”分别用于开启 ESLint 和 Prettier 的格式化功能，“editor.codeActionsOnSave”用于在保存文件时自动修复错误和格式化代码。

常见问题和解决方案

ESLint 报错“Parsing error: Unexpected token”

当 ESLint 检查到代码中的语法错误时，会报错“Parsing error: Unexpected token”。这通常是因为 ESLint 的解析器不支持一些新的语法特性。解决方法是在 .eslintrc.js 中添加 parserOptions 配置：

// javascriptcn.com 代码示例
module.exports = {
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    }
  },
  // ...
};

ESLint 报错“'React' must be in scope when using JSX”

当使用 JSX 语法时，ESLint 可能会报错“'React' must be in scope when using JSX”。这是因为 ESLint 默认把 React 当作一个未定义的变量来处理。解决方法是在 .eslintrc.js 中添加 env 和 globals 配置：

// javascriptcn.com 代码示例
module.exports = {
  env: {
    browser: true,
    node: true,
    es6: true
  },
  globals: {
    React: "writable"
  },
  // ...
};

Prettier 格式化后代码出错

当使用 Prettier 格式化代码后，有可能会导致代码出错。这是因为 Prettier 和 ESLint 的规则有冲突。解决方法是在 .eslintrc.js 中添加 “prettier/prettier” 规则：

module.exports = {
  rules: {
    "prettier/prettier": "error",
    // ...
  },
  // ...
};

这样 ESLint 就会执行 Prettier 的规则，避免冲突。

总结

配置 ESLint 和 Prettier 可以很大程度上提高代码的质量和可读性。本文介绍了在 VSCode 中配置 ESLint 和 Prettier 的步骤和常见问题的解决方法。希望对前端开发工程师有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653616027d4982a6ebdefda0