新手怎么配置ESLint和Prettier，写代码时能做到保存自动格式化吗？

万能的逗号

对于新手来说，配置ESLint和Prettier并实现代码保存自动格式化是提升代码质量和开发效率的重要一步。ESLint是一个用于识别和报告JavaScript代码中问题的工具，它可以帮助我们发现代码中的潜在错误、不符合规范的地方以及提高代码的可读性。Prettier则是一个强大的代码格式化工具，它能够统一代码风格，让代码看起来更加整洁美观。
我们需要初始化一个项目。可以使用npm init -y命令快速创建一个基本的package.json文件。接下来，安装ESLint和Prettier及其相关依赖。在项目目录下运行npm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks --save-dev。其中，eslint是核心工具，eslint-config-prettier用于关闭ESLint中与Prettier冲突的规则，eslint-plugin-prettier可以将Prettier作为ESLint的规则运行，eslint-plugin-react和eslint-plugin-react-hooks分别用于React项目的代码检查。
安装完成后，我们需要配置ESLint。在项目根目录下创建一个.eslintrc.js文件，内容如下：
module.exports = {
env: {
browser: true,
es6: true,
node: true
},
extends: [
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'prettier'
],
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: 'module'
},
plugins: [
'react',
'react-hooks',
'prettier'
],
rules: {}
};
这里我们配置了环境、继承的规则集、解析器选项和插件等。extends数组中引入了react和react-hooks的推荐规则集以及prettier规则集，这样可以让ESLint与Prettier更好地配合。
接着，配置Prettier。在项目根目录下创建一个.prettierrc文件，根据自己的喜好设置代码风格，例如：
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
这个配置文件表示不使用分号、使用单引号以及在ES5风格下使用尾逗号。
为了实现保存自动格式化，我们还需要安装husky和lint-staged。运行npm install husky lint-staged --save-dev。然后在package.json文件中添加如下脚本：
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"src//*.{js,jsx}": [
"eslint --fix",
"prettier --write"
]
}
husky可以在git commit之前执行脚本，lint-staged则可以针对匹配的文件运行指定的命令。这里我们配置了在提交时对src目录下的js和jsx文件先进行ESLint自动修复，再进行Prettier格式化。
配置完成后，当我们在编辑器中保存代码时，就会自动触发ESLint和Prettier进行检查和格式化。如果代码存在问题，ESLint会给出提示并尝试自动修复，Prettier会按照配置的规则对代码进行格式化，让代码风格更加统一规范。对于新手来说，这不仅可以减少手动调整代码风格的工作量，还能帮助养成良好的代码习惯，提高代码的质量和可维护性。在实际开发中，我们可能还需要根据项目的具体需求进一步调整ESLint和Prettier的配置，以满足不同的场景和团队协作要求。但通过这样的配置，新手可以快速上手并享受到代码自动格式化带来的便利。