ESLint+Prettier 风格配置实践
前言
在前端开发过程中，我们不可避免地需要关注代码风格，因为良好的代码风格可以提高代码可读性，降低团队协作和维护成本。 在这篇文章中，我将分享如何使用 ESLint 和 Prettier 配置前端代码风格，让你的代码看上去更加整洁、规范，减少代码缺陷。
一、ESLint 的作用
ESLint 是一个开源的 JavaScript 代码检查工具，它可以分析代码的语法，查找潜在问题，并提供代码风格建议，常用的功能包括：
- 语法校验：根据 ECMAScript 语法规范，检查代码中的语法错误；
- 风格检查：检查代码中的风格错误，如缩进、空格、注释等；
- 规范化：提供一些规范化的配置，如：禁止使用 console.log；
- 按照团队的风格要求进行配置。
二、Prettier 的作用
Prettier 是一个代码格式化工具，它可以自动格式化你的代码，让你的代码风格与你的团队一致，并且在提交代码时自动运行，可以改善整个团队的合作效率。
三、使用 ESLint 和 Prettier 进行前端代码风格配置
下面是一些配置步骤，用于使 ESLint 和 Prettier 在项目中运行。
- 安装 ESLint
打开终端，进入项目根目录，执行以下命令：
npm install eslint --save-dev
- 安装 Prettier
同样使用 npm 安装：
npm install prettier --save-dev
- 安装 eslint-plugin-prettier 和 eslint-config-prettier
这两个包可以使 ESLint 和 Prettier 共同工作。
npm install eslint-plugin-prettier eslint-config-prettier --save-dev
- 创建 ESLint 的配置文件
在项目根目录下创建 .eslintrc.js 或 .eslintrc.json 文件来进行配置。
-- -------------------- ---- -------
-- ------------
-------------- - -
-------- -
---------------------
-----------------------------
--
-------------- -
------------ ----
--
---- -
-------- -----
----- ----
--
------ -
-------------------- -------
-
--上面的配置中，extends 字段表示继承的配置，parserOptions 字段指定 ECMAScript 的版本，env 字段设置环境变量。rules 字段用于覆盖或添加规则。
- 创建 Prettier 配置文件
在项目根目录下创建 .prettierrc.js 或 .prettierrc.json 文件来进行配置。
//.prettierrc.js
module.exports = {
semi: true,
singleQuote: true,
printWidth: 120,
tabWidth: 2,
trailingComma: 'none',
};- 在 package.json 中添加 scripts
-- -------------------- ---- -------
--------------
-
---
---------- -
------- ------- -- ------------ -------------
--------- --------- ------- --------------------------------
--
---
-上面脚本中，lint 命令可以检查代码中的问题，format 命令将项目中的所有 .js、.html、.css、.scss 文件格式化。
四、如何使用
安装必要的包之后，可以使用以下命令执行 ESLint 配置和 Prettier 配置：
npm run lint // 检查代码 npm run format // 格式化代码
五、示例说明
- 禁止在非注释的行末插入分号
//.eslintrc.js
module.exports = {
rules: {
'semi': ['error', 'never'], // 禁用分号
},
};- 配置默认打开的变量
-- -------------------- ---- -------
--------------
-------------- - -
-------- -
---- -----
------ -----
------- -----
-- -----
--
--- 让 ESLint 和 Prettier 同时工作，解决风格问题。
-- -------------------- ---- -------
--------------
-------------- - -
-------- -
---------------------
----------------------------- -- -- ---------------------- --
--
------ -
-------------------- -------- -- - -------- ----- ------ ----
--
--//.prettierrc.js
module.exports = {
semi: true,
singleQuote: true,
printWidth: 120,
tabWidth: 2,
trailingComma: 'none',
};六、总结
在这篇文章中，我们探讨了如何使用 ESLint 和 Prettier 配置前端项目的代码风格。ESLint 可以帮助你规范你的代码，Prettier 可以统一你的代码风格。这两个工具的结合，可以使项目代码整洁规范，提高工作效率。
以上只是一些基础配置，对于具体的项目还需要根据需求进行一些适当的调整。希望这篇文章能够帮助大家更好地管理前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ac00f48841e98947b325d