后缀配置点睛之笔：setting.json、.editorconfig、.eslintrc.json和.prettier.js

2024-02-08 07:55:03

在 VSCode 中配置 ESLint 和 Prettier 以提升代码规范

对于一丝不苟的开发者来说，代码规范性至关重要。在这方面，编辑器中的代码检查和格式化工具可以成为宝贵的帮手。在备受推崇的代码编辑器 VSCode 中，我们可以借助 setting.json、.editorconfig、.eslintrc.json 和 .prettier.js 这四位得力助手，配置 ESLint 和 Prettier，让代码风格检查和格式化变得轻而易举。

1. setting.json：全局配置基地

setting.json 是 VSCode 的配置文件，可以自定义编辑器的方方面面，包括 ESLint 和 Prettier 的设置。通过修改 setting.json 文件，我们可以轻松启用这两个工具。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.enable": true,
  "prettier.enable": true
}

这段配置开启了 ESLint 和 Prettier。当我们在 VSCode 中编辑代码时，它们会实时检查代码风格，并提供有价值的建议。

2. .editorconfig：统一编码标准

.editorconfig 是一个配置文件，旨在统一代码编辑器中的各种设置，包括缩进、换行和制表符。创建一个 .editorconfig 文件并将其添加到项目中，即可轻松配置这些设置。

root = true

[*]
charset = utf-8
trim_trailing_whitespace = true
indent_style = space
indent_size = 2

这样，我们就为代码统一了字符集、缩进风格和缩进大小等重要标准。

3. .eslintrc.json：定制 ESLint 规则

.eslintrc.json 是 ESLint 的配置文件，用于自定义 ESLint 的检查规则。创建一个 .eslintrc.json 文件并将其添加到项目中，即可配置这些规则。

{
  "extends": "eslint:recommended",
  "rules": {
    "no-console": "warn"
  }
}

这段配置将 ESLint 的默认规则集应用到我们的项目中，并额外添加了针对 console.log 用法的警告规则。

4. .prettier.js：美化代码风格

.prettier.js 是 Prettier 的配置文件，用于自定义 Prettier 的代码格式化规则。创建一个 .prettier.js 文件并将其添加到项目中，即可配置这些规则。

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: "es5"
};

这段配置将 Prettier 设置为使用 80 列的打印宽度、2 个空格的缩进宽度、单引号和尾随逗号等规则。

结论：规范代码，提升开发效率

通过配置这四个文件，我们可以在 VSCode 中轻松实现代码风格检查和代码格式化。这样一来，我们的代码将更加规范、可读性更强，进而提升我们的开发效率和代码维护的便利性。

常见问题解答

配置 ESLint 和 Prettier 有什么好处？
- 增强代码规范性，减少错误
- 提升代码的可读性和可维护性
- 自动化代码格式化，节省时间
我应该在什么时候配置这些工具？
- 创建新项目时
- 加入现有项目时
- 当代码风格不一致时
如何解决 ESLint 和 Prettier 之间的冲突？
- 检查 .eslintrc.json 和 .prettier.js 文件是否存在冲突的规则
- 调整规则优先级或配置扩展以解决冲突
我可以在多个项目中使用相同的配置吗？
- 是的，你可以通过创建共享的配置文件（例如全局 .eslintrc.json 文件）来实现
这些工具是否与其他编辑器兼容？
- ESLint 和 Prettier 是跨平台工具，兼容多种编辑器和 IDE，包括 Atom、Sublime Text 和 WebStorm