一键式配置ESLint和Prettier：告别手动配置，拥抱高效开发！

2023-07-25 07:16:16

提升代码质量：ESLint和Prettier配置指南

在网页开发中，代码质量是决定项目成败的关键因素。为了确保代码的可读性、可维护性和一致性，ESLint和Prettier这两款流行的代码风格检查工具应运而生。但是，对于初学者来说，手动配置这些工具可能是一项繁琐且耗时的任务。本文将使用pnpm，为您提供一个快速、便捷的ESLint和Prettier配置指南，助您轻松提升代码质量。

为什么要使用ESLint和Prettier？

ESLint：

静态代码分析工具
检查代码语法、风格和潜在错误
帮助发现并修复代码缺陷

Prettier：

代码格式化工具
自动格式化代码，提升可读性和一致性
减少代码格式化时间，便于代码阅读和维护

使用pnpm配置ESLint和Prettier

1. 安装pnpm

npm：npm install -g pnpm
yarn：yarn global add pnpm

2. 创建项目

pnpm create my-project
cd my-project

3. 安装ESLint和Prettier

pnpm install eslint prettier

4. 配置ESLint

创建.eslintrc.js文件，添加以下配置：

{
  "root": true,
  "env": { "node": true, "es6": true },
  "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended" ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": { "ecmaVersion": 2020, "sourceType": "module" },
  "plugins": [ "react", "@typescript-eslint" ],
  "rules": { /* ...自定义规则 */ }
}

5. 配置Prettier

创建.prettierrc.js文件，添加以下配置：

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}