prettier

Prettier 是一个代码格式化工具，可以让团队的代码风格保持一致。 可支持的源码类型包括：JavaScript、JSX、Angular、Vue、Flow、TypeScript、CSS、HTML、JSON、YAML 等等。

prettier 可以用于统一项目代码风格，统一的缩进，单双引号，尾逗号等等风格

prettier 配置文件位于项目根目录下 prettier.config.js 或 .prettierrc

prettier 主要用来检查代码风格问题，它支持多种语言，我们这里讨论关于 JavaScript 的，例如应该使用单引号还是双引号，该不该换行，tab 键占多少个空格，结尾要不要分号 等等问题。

Prettier 中文网

• VSCode插件
• 操作步骤
• Prettier 对比 ESLint
• 如何配置 Prettier
• Prettier 和 ESLint 一起干活更配哦
  • 冲突了怎么办
  • 总结
• 核心配置
• Contributors

VSCode插件

在项目开发过程中我们经常想要及时的格式化代码，这样看起来更舒服。

如果通过命令行CLI操作的话就比较麻烦。为此官方也提供了编辑器插件，我们可以通过快捷键方便的对文件进行格式化，或者设置保存时自动格式化

在vsCode的extensions中搜索Prettier-Code formater 并安装。

如果有其他格式化工具（例如vetur格式化工具没有禁用），我们在settings.json文件中加入如下配置，让vue文件使用prettier作为默认的格式化工具。 此时我们就可以用快捷键方便的使用prettier进行格式化

Prettier插件也会读取.prettier中的配置用于格式化。

如果settings.json中也对prettier进行了配置（例如”prettier.semi”:true）将会被.prettier中的配置覆盖。

操作步骤

前提：vscode 安装 eslint prettier插件

1.安装eslint prettier 和相关依赖

npm i eslint prettier -D
npm i eslint-plugin-vue -D
npm i eslint-config-prettier -D
npm i eslint-plugin-prettier -D

简写

npm i eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier -D

提示

prettier 补充知识

•eslint-config-prettier 关闭 Eslint 中与 Prettier 冲突的选项，只会关闭冲突的选项，不会启用Prettier的规则

•eslint-plugin-prettier 启用 Prettier 的规则

通过使用eslint-config-prettier配置，能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保，这个配置在extends的最后一项。

eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查，其原理是先使用prettier对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier进行标记。

2.新建.prettierrc.js

// .prettierrc.js 
// prettier代码检查规则:
module.exports = {
	// 最大长度80个字符
	printWidth: 80,
	// 行末分号
	semi: false,
	// 单引号
	singleQuote: true,
	// JSX双引号
	jsxSingleQuote: false,
	// 尽可能使用尾随逗号（包括函数参数）
	trailingComma: 'none',
	// 在对象文字中打印括号之间的空格。
	bracketSpacing: true,
	// > 标签放在最后一行的末尾，而不是单独放在下一行
	jsxBracketSameLine: false,
	// 箭头圆括号
	arrowParens: 'avoid',
	// 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
	insertPragma: false,
	// 缩进
	tabWidth: 2,
	// 使用tab还是空格
	useTabs: true,
	// 行尾换行格式
	endOfLine: 'auto',
	HTMLWhitespaceSensitivity: 'ignore'
}

3.修改.eslintrc.js

// ESlint 检查配置
module.exports = {
	root: true,
	parserOptions: {
		parser: 'vue-eslint-parser',
		sourceType: 'module'
	},
	env: {
		browser: true,
		node: true,
		es6: true,
	},
	extends: ['eslint:recommended', 'plugin:prettier/recommended'], 
	// add your custom rules here
	// it is base on https://github.com/vuejs/eslint-config-vue
	rules: {
		// 表示被prettier标记的地方抛出错误信息
		'prettier/prettier': 'error'
	}
}

4.vscode 首选项-设置-settings.json

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
    // 保存时自动修复
  },
  "editor.fontSize": 18,
  // vscode编辑器字体大小
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  // 统一编辑器tab为2个空格
  "javascript.validate.enable": true,
  "sync.gist": "4b16271e70016a1fb3b98d85e34f874c",
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "editor.formatOnSave": true
}

Prettier 对比 ESLint

我们知道 ESLint 负责了对代码的校验功能，并且主要提供了 2 类规则：

• 检查格式化的规则
• 检查代码质量的规则

说到底 ESLint 就是通过一条条的规则去限制代码的规范，但是这些规则毕竟是有限的，而且更重要的是这些规则的重点并不在代码风格上，所以单凭 ESLint 并不能完全的统一代码风格。

这个时候就需要引入 Prettier 了，因为它干的事就是只管代码格式化，不管代码质量。

Prettier：在代码风格这一块，我一直拿捏的死死的。

如何配置 Prettier

# 安装包
npm i prettier -D  

# 新建 .prettierrc.js
echo module.exports = {} > .prettierrc.js

# 新建 .prettierignore
echo > .prettierignore

Prettier 支持可以配置参数不多，总共才 21 个，这里是所有参数的说明 prettier options

所有参数都有默认值，也就是说即使你没有配置 .prettierrc.js，当你用 Prettier 去格式化代码的时候全部都会走默认配置。

针对个别参数，你不想用默认设置的话，就可以在 .prettierrc.js 配置具体想要的值。

如下，把项目中会用到的参数进行一个说明：

module.exports = {
    printWidth: 80,                    //（默认值）单行代码超出 80 个字符自动换行
    tabWidth: 2,                       //（默认值）一个 tab 键缩进相当于 2 个空格
    useTabs: true,                     // 行缩进使用 tab 键代替空格
    semi: false,                       //（默认值）语句的末尾加上分号
    singleQuote: true,                 // 使用单引号
    quoteProps: 'as-needed',           //（默认值）仅仅当必须的时候才会加上双引号
    jsxSingleQuote: true,              // 在 JSX 中使用单引号
    trailingComma: 'all',              // 不用在多行的逗号分隔的句法结构的最后一行的末尾加上逗号
    bracketSpacing: true,              //（默认值）在括号和对象的文字之间加上一个空格
    jsxBracketSameLine: true,          // 把 > 符号放在多行的 JSX 元素的最后一行
    arrowParens: 'avoid',              // 当箭头函数中只有一个参数的时候可以忽略括弧
    vueIndentScriptAndStyle: false,    //（默认值）对于 .vue 文件，不缩进 <script> 和 <style> 里的内容
    embeddedLanguageFormatting: 'off', // 不允许格式化内嵌的代码块，比如 markdown  文件里的代码块
};

然后可以通过命令来格式化代码：

# 将格式化当前目录及子目录下所有文件
npx prettier --write .

# 检查某个文件是否已经格式化
npx prettier --check src/main.js

如果有些文件不想被 Prettier 格式化，可以将其写入到 .prettierignore 里：

build/
package.json
public/
test/*.*

Prettier 和 ESLint 一起干活更配哦

上面介绍了 Prettier 的具体配置，这里主要介绍和 ESLint 结合使用的配置和注意事项。 和 ESLint 配合使用需要用到 eslint-plugin-prettier 这个插件：

npm i eslint-plugin-prettier -D

配置：

{
    plugins: ['prettier'],
    rules: {
        'prettier/prettier': 'error'
    }
}

这个插件的工作原理是先调用 Prettier 对你的代码进行格式化，然后会把格式化前后不一致的地方进行标记，通过配置 ' prettier/prettier': 'error' 此条规则会将标记地方进行 error 级别的报错提示，然后可以通过 ESLint 的 --fix 自动修复功能将其修复。

冲突了怎么办

通过前面的介绍，我们知道 ESLint 也是会对代码风格做一些限制的，而 Prettier 主要就是规范代码风格，所以在把它们结合一起使用的时候是存会在一些问题的。对于个别规则，会使得双方在校验后出现代码格式不一致的问题。

那么当 Prettier 和 ESLint 出现冲突之后，该怎么办呢？

用 Prettier 的话来说很简单，只要使用 eslint-config-prettier 就可以了。

解决冲突的思路就是通过将这个包提供的扩展放到 extends 最后面引入，依据 rules 生效的优先级，所以它会覆盖前面起冲突的规则，比如：

{
extends: [
		'eslint:recommended',
		'prettier',  // 必须放最后
	],
}

除了能覆盖和 ESLint 中起冲突的规则之外，eslint-config-prettier 还能覆盖来自以下插件的规则（只列了部分）：

• eslint-plugin-standard
• eslint-plugin-vue 那 eslint-config-prettier 到底提供了哪些覆盖规则呢？直接看这个列表：eslint-config-prettier rules 如果想覆盖某些插件的规则，需要引入对应插件的扩展，比如：

{
    extends: [
        'standard',
        'plugin:vue/recommended',
        'prettier/standard',      // 覆盖 eslint-config-stanard 
        'prettier/vue',           // 覆盖 eslint-plugin-vue 
    ],
}

提示

提示：在 eslint-config-prettier 8.0.0 版本后，extends 不再需要为单独的插件引入对应扩展来覆盖冲突了，统一引入 'prettier' 即可。

如果同时使用了 eslint-plugin-prettier 和 eslint-config-prettier 可以这么配置：

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

它其实和下面这些配置是等价的：

{
    extends: ['prettier'],  // eslint-config-prettier 提供的，用于覆盖起冲突的规则
    plugins: ['prettier'],  // 注册 eslint-plugin-prettier 插件
    rules: {
        'prettier/prettier': 'error',
        'arrow-body-style': 'off',
        'prefer-arrow-callback': 'off'
    }
}

所以如果是在 Vue 2 项目中配置 ESLint 和 Prettier 会这么配置：

{
    parser: 'vue-eslint-parser',
    parseOptions: {
        parser: 'babel-eslint',
        ecmaVersion: 12,
        sourceType: 'module'
    },
    extends: [
        'eslint:recommended', 
        'plugin:vue/recommended',
        'plugin:prettier/recommended',  // 在前面 Vue 配置的基础上加上这行
    ],
    plugins: ['vue']
}

其实如果你的项目是用 vue-cli 初始化的，且选择了 eslint + prettier 方案的话，生成的项目中，.eslintrc.js 配置文件中 extends 的配置是这样的：

{
    extends: [
        'plugin:vue/essential',
        'eslint:recommended', 
        '@vue/prettier'
    ]
}

它的最后一项扩展是 @vue/prettier，这个对应的是 @vue/eslint-config-prettier 这个包，让我们看看这个包下面的 index.js 内容：

{
    plugins: ['prettier'],
    extends: [
        require.resolve('eslint-config-prettier'),
        require.resolve('eslint-config-prettier/vue')
    ],
    rules: {
        'prettier/prettier': 'warn'
    }
}

这个和我们上面配置的内容是相差无几的，而引入 eslint-config-prettier/vue 是因为这个 @vue/eslint-config-prettier 包依赖的 eslint-config-prettier 版本是 ^6.0.0 版本的，所以在处理冲突的时候需要特别指定和对应类型插件匹配的扩展。

总结

eslint 配置代码风格、质量的校验，prettier用于代码格式的校验，lint-staged 过滤文件

首先明确一下，Lint-staged 仅仅是文件过滤器，不会帮你格式化任何东西，所以没有代码规则配置文件，需要自己配置一下，如：.eslintrc、.stylelintrc等，然后在package.json中引入。

eslint 和 prettier两者配合使用，即 使用 prettier 做格式化， eslint 做代码校验。

第一，ESLint 推出 --fix 参数前，ESLint 并没有自动格式化代码的功能，而 Prettier 可以自动格式化代码。

第二，虽然 ESLint 也可以校验代码格式，但 Prettier 更擅长。

所以还需要 eslint-config-prettier,eslint-plugin-prettier 加强两者的配合

eslint-plugin-prettier是一个ESLint插件， 由Prettier生态提供，用于报告错误给ESLint

eslint-config-prettier 的作用是使用Prettier默认推荐配置，并且关闭 eslint 自身的格式化功能，防止Prettier和ESLint的自动格式化冲突

核心配置

1. 安装依赖

# 安装 prettier
ni -D prettier

# 安装 prettier 整合 eslint 的库
ni -D eslint-plugin-prettier eslint-config-prettier

# package.json 字段排序插件
ni -D prettier-plugin-packagejson

# import 顺序自动调整插件
ni -D prettier-plugin-organize-imports

汇总版如下：

npm i eslint prettier lint-staged eslint-plugin-prettier eslint-config-prettier prettier-plugin-packagejson prettier-plugin-organize-imports

新建 .prettierrc 文件，并写入以下内容：

常用的配置.prettier.js

module.exports = {
	printWidth: 120, // 换行字符串阈值
	tabWidth: 2, // 设置工具每一个水平缩进的空格数
	useTabs: false,
	semi: false, // 句末是否加分号
	vueIndentScriptAndStyle: true,
	singleQuote: true, // 用单引号
	trailingComma: 'none', // 最后一个对象元素加逗号
	bracketSpacing: true, // 对象，数组加空格
	jsxBracketSameLine: true, // jsx > 是否另起一行
	arrowParens: 'always', // (x) => {} 是否要有小括号
	requirePragma: false, // 不需要写文件开头的 @prettier
	insertPragma: false // 不需要自动在文件开头插入 @prettier
}

.eslintrc.js建议采用自己的项目配置

module.exports = {
	root: true,
	env: {
		browser: true,
		node: true,
		es6: true
	},
	extends: [
		'prettier',
		'plugin:prettier/recommended'
	],
	"plugins": ["prettier-plugin-packagejson", "prettier-plugin-organize-imports"], 
	rules: { ...yourselfConfig }
}

Contributors

作者:Long Mo

字数统计:3k 字

阅读时长:11 分钟

Long Mo

文章作者：Long Mo

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Longmo Docs ！