Vue | 如何使用 ESlint 和 Prettier 对代码进行分析和格式化_使用 prettier 根据eslint 格式化代码-优快云博客

本文链接：https://blog.youkuaiyun.com/alexwei2009/article/details/125324511

本文介绍了如何在JavaScript项目中配置和使用ESLint与Prettier进行代码分析和格式化。通过安装和配置这两个工具，可以提升代码质量和团队协作效率。在项目根目录下设置相关配置文件，如.eslintignore、.eslintrc.json、.prettierrc.json和.prettierignore。ESLint专注于JavaScript，而Prettier支持多种语言。在VSCode中，重启ESLint服务可解决配置后不生效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 概述

在 JavaScript 的世界里，提到代码分析和格式化，不能不说 ESLint 和 Prettier 了。两者都是非常流行的代码分析工具。

它们的不同之处在于，ESLint 只支持 JavaScript，而 Prettier 却支持 JavaScript、HTML、CSS、Markdown 等多种语言类型。

2 为什么要进行代码格式化？

对代码进行格式化可以提高开发效率，减少代码审查时间，确保团队每个人写出来的代码是一致的。

通常情况下，在项目的根目录下会存在下面四个文件，用于分析或者忽略指定文件。

.eslintignore
.eslintrc.json
.prettierignore
.prettierrc.json

3 配置 ESLint 和 Prettier

3.1 安装 ESLint

打开控制台，输入下面的命令。

mkdir backend
cd backend
npm init -y
npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev

然后，再运行下面的命令

npm init @eslint/config

3.2 安装 Prettier

在控制台，输入命令如下：

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json

打开 .eslintrc.json 文件添加配置。

"extends": ["airbnb-base", "plugin:prettier/recommended"],

"plugins": ["prettier"],

然后，打开 .prettierrc.json 文件，添加下面的设置。

{
  "printWidth": 100,

  "semi": true,

  "singleQuote": true,

  "tabWidth": 4,

  "useTabs": false,

  "trailingComma": "none",

  "endOfLine": "auto"
}

最后，指定需要忽略的文件或者目录。

touch .prettierignore .eslintignore

在两个文件中可以填写同样的配置。

node_modules
package.lock.json
build

3.3 使用 ESLint 和 Prettier

创建 index.js 文件，添加如下代码：

const x = 100;

console.log(x);

const test = (a, b) => {
  return a + b;
};

此时，会看到 log 和 test 下面有波浪线。如果要去掉这些波浪线，就要在 .prettierrc.json 文件中添加如下规则。

"rules": {

"no-console": "off",

"no-unused-vars": "off"

}

现在，波浪线就消失了。

注意：如果配置规则后不生效，此时，就要重启 ESLint 服务了。在 Visual Studio Code 里可以通过快捷键 Shift+CMD+P 来重启ESLint 服务。