当前位置：首页 > news >正文

ESLint+Prettier+Vetur 统一Vue项目代码风格

news 来源：原创 2024/4/30 13:55:25

前言

一、为什么要整合Eslint和Prettier？

1、对比Prettier和Linters（eslint/tslint/stylelint）

Linters有两类规则：

格式化规则：如最大长度，没有混合空格和制表符，关键字间距，逗号样式…Prettier减轻了这一类规则的需要！Prettier将以一致的方式从头开始重新打印整个程序，因此程序员不可能再在那里犯错误。* 代码质量规则：如没有未使用的变量，没有额外的绑定，没有隐式全局变量…Prettier无助于这些规则。它们也是Linter提供的最重要的工具，因为它们很可能会从你的代码中捕获真正的bug。### 2、使用Prettier的好处
Prettier是“约定大于配置”，各种代码格式相关的规则基本都约定好了，可以省去配置的时间和精力，也可以避免项目中关于代码格式的争论。
Prettier是“主厨精选”，这些规则都是精选出来的，质量都很高。
Prettier更注重格式化，对格式化的覆盖面比常用的 eslint-config-standard 和 eslint-config-airbnb 还要广。这当中有一些是 Prettier 比 eslint 的样式规则更多，有一些也可能是 eslint 对应的规则没有进行配置。更重要的是对于一些格式，eslint往往只会警告而不会自动格式化，如强制行的最大长度max-len，而Prettier可以自动格式化。因此Prettier是一个更强大的格式化工具。
Prettier支持多种语言，使用一个工具，即可统一每一种语言的风格。（prettier支持除js和vue之外的其它文件，使用项目中的prettier依赖和配置格式化其他类型文件，可以保证项目中其它类型文件的格式也统一。这样一来也保证了项目中所有类型的文件都是使用prettier来格式化的。）

二、如何整合Eslint和Prettier？

只需要使用eslint-plugin-prettier和eslint-config-prettier。

eslint-plugin-prettier ：

该插件的原理是调用prettier去检查代码然后将错误转化为eslint的错误，这样借助eslint的fix功能，就可以自动格式化代码。

eslint-config-prettier：

它只做一件事就是关闭eslint中所有和prettier有冲突的rules。

最终所需的配置只有

{"extends": [ "some-other-config-you-use", "plugin:prettier/recommended"]
}

具体实现步骤

一、安装依赖并配置配置文件

需要安装的依赖为

eslint、eslint-plugin-vue：这两个依赖项目基本都有。

prettier、eslint-plugin-prettier、eslint-config-prettier

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier

安装完上面的依赖后所需要的所有配置如下

1、eslint配置文件.eslintrc.js为

module.exports = {root: true,parserOptions: {parser: 'babel-eslint',sourceType: 'module'},env: {browser: true,node: true,es6: true,},extends: ['eslint:recommended','plugin:vue/recommended','plugin:prettier/recommended'],// add your custom rules here//it is base on https://github.com/vuejs/eslint-config-vuerules: {}
}

2、prettier配置文件.prettierrc为

{"trailingComma": "none","tabWidth": 2,"semi": false,"singleQuote": true,"endOfLine": "auto","printWidth": 160
}

二、配合vscode插件使用

上面安装完依赖并配置完成后其实已经可以通过命令行来使用，但为了更方便地使用可以配合vscode插件。

1、ESLint插件

设置两种情况：

Run：打字时（onType）
Run --fix：保存时（Code Actions On Save）

针对js和vue文件，格式化本质还是使用prettier依赖。

2、Prettier插件

设为全局默认formatter。

一般有两种使用方式：保存时自动格式化或者手动快捷键。

可根据自己喜好全局设置为保存时自动格式化，不过如果设置了要关闭对js和vue文件的保存时自动格式化，因为eslint已经可以调用prettier对js和vue文件进行格式化了。如果不关闭的话，这样就会对js和vue文件格式化两遍，一次是eslint --fix，一次是pretteir格式化。

对除js和vue之外的文件类型，直接使用Prettier插件进行格式化即可，它会使用项目中的prettier依赖和配置，这样也保证了项目成员格式化其它类型文件时格式也是统一的。

3、Vetur插件

eslint-plugin-vue只能对vue文件的和

This plugin allows us to check the <template> and <script> of .vue files with ESLint, as well as Vue code in .js files.

而eslint调用pretteir虽然可以检查

如上图，Vetur中默认就是打开Validation: Style的，而借助eslint-plugin-vue已经可以检查和

下面附上相关的vscode配置：

打开方式：F1——搜settings——Open Settings (JSON)

{/* 格式化相关 */"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": false,// 根据自己喜好设置保存时是否自动格式化// 可以为特定文件类型设置特定的行为"[javascript]": {"editor.formatOnSave": false,},"[vue]": {"editor.formatOnSave": false},// vetur"vetur.validation.script": false,"vetur.validation.template": false,// eslint"editor.codeActionsOnSave": {"source.fixAll.eslint": true// 保存时是否自动fix}
}