eslint，prettier配置

「已注销」

已于 2022-05-12 18:07:21 修改

阅读量5.5k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：代码风格规范文章标签： eslint配置代码规范

于 2022-05-11 22:40:39 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43586840/article/details/124720973

代码风格规范专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何配置ESLint和Prettier，包括ESLint的初始化设置、Prettier的安装与配置，以及如何解决两者冲突，旨在提升代码质量和保持一致性。最后，文章提供了相关工具的官网链接以便进一步学习。

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

ESlint与Prettier配置

什么是eslint

简单的说eslint就是代码检查工具, 用来检查你的代码是否符合指定的规范;使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查，就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。

eslint配置

初始化一个express项目

mkdir eslint-test
cd eslint-test
npm init -y
npm i express
touch index.js

index.js内容如下

const express = require('express')
const app = express()

app.get('/', async (req, res) => {
	try {
		res.send('<h1>eslint init</h1>')
	} catch {}
})

app.listen(3000, () => {
	console.log('server run on port 3000')
})

安装eslint并初始化

npm i eslint --save-dev
npm init @eslint/config

选择eslint提供的功能

3.1 选择检查语法, 发现问题,强制代码风格

3.2 项目以哪种模块类型，选择 CommonJs, 因为我们是使用的Node环境

3.3 项目使用什么框架, 什么都不选

3.4 项目使用ts吗，选择不使用

3.5 项目使用什么样的代码风格选择使用一个流行的样式方案

3.6 提供的几种比较流行的方案, 选择标准的

3.7 配置文件已什么结尾的，这里选择 js

3.8 安装标准方案提供的一些依赖

3.9 使用什么包管理器, 这里选择 npm
创建 .eslintignore文件，该文件是eslint需要忽略的文件

node_modules
package*.json
等

在package.json中scripts中添加配置

"lint": "eslint . --ext .js,.json",
"lint:fix": "eslint --fix . --ext .js,.json"

需要⚠️注意的是: eslint --fix . --ext .js,.json中的.js,.json中间不要带空格

执行 npm run lint即可查看哪些代码不符合eslint的标准, npm run lint:fix可以修复这些不符合的标准

什么是prettier

Prettier是一个代码格式化工具，它可以支持JS/JSX/TS/Flow/JSON/CSS/LESS等文件格式。

为什么要使用prettier?

用来替代lint中的一些场景，比如说分号/tab缩进/空格/引号，这些在lint工具检查出问题之后还需要手动修改，而通常这样的错误都是空格或者符号之类的，这样相对来说不太优雅，利用格式化工具自动生成省时省力。

安装prettier

npm install --save-dev --save-exact prettier
–save-exact的作用就是固定依赖包的版本，不要带^或~，避免出现小版本。
有利于版本统一。

创建 .prettierrc.js, 内容如下

module.exports = {
  tabWidth: 2,
  printWidth: 80,
  useTabs: false,
  semi: true,
  singleQuote: true,
  bracketSpacing: true,
  bracketSameLine: false,
  trailingComma: 'es5',
  overrides: [
    {
      files: '*.json',
      options: {
        printWidth: 140,
      },
    },
  ],
};

prettier常用配置

// 超过最大值换行
printWidth: 100, 
 // 缩进字节数
tabWidth: 4,
 // 缩进不使用tab, 使用空格
useTabs: false,
 // 句尾添加分号
semi: true,
// 使用单引号代替双引号
singleQuote: true, 
// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
proseWrap: "preserve", 
//  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid: 省略括号
arrowParens: "avoid", 
 // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
bracketSpacing: true,
 // 不格式化vue文件，vue文件的格式化单独设置
disableLanguages: ["vue"],
// 结尾是 \n \r \n\r auto
endOfLine: "auto", 
//不让prettier使用eslint的代码格式进行校验
eslintIntegration: false, 
htmlWhitespaceSensitivity: "ignore",
 // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
ignorePath: ".prettierignore",
// 在jsx中把'>' 是否单独放一行
jsxBracketSameLine: false, 
// 在jsx中使用单引号代替双引号
jsxSingleQuote: false, 
 // 格式化的解析器，默认是babylon
parser: "babylon",
// Require a 'prettierconfig' to format prettier
requireConfig: false, 
 //不让prettier使用stylelint的代码格式进行校验
stylelintIntegration: false,
 // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
trailingComma: "es5",
 // 不让prettier使用tslint的代码格式进行校验
tslintIntegration: false

解决ESLint和prettier冲突

解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效

npm i eslint-config-prettier --save-dev
eslint-config-prettier 作用就是解决eslint和prettier冲突

需要在.eslintrc.js配置extend

extends: [
	// eslint-config-prettier, 关闭一些与 Prettier 冲突的 ESLint 规则。
	// 覆盖eslint格式配置, 需要写在extends最后面
	'prettier',
],

prettier额外配置

大家都知道prettier主要是用来进行代码格式化的, 美化代码的, 那肯定需要触发如： prettier --write . ，这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。

安装eslint-plugin-prettier

npm i eslint-plugin-prettier -D

需要在.eslintrc.js配置extend

extends: [
	'plugin:prettier/recommended'
],

总结

以上便是eslint，prettier的配置

prettier: prettier官网
eslint: eslint官网