前端学习日记 # ESLint & Prettier & Vetur

涛少
390 阅读8分钟

简介

现代前端开发借鉴了很多编译型编程语言的特性，例如：代码检查，自动代码修复，代码错误提示等，而且还给强迫症患者（团队）带来了代码格式化，让代码风格保持一致，下面介绍两款前端开发常用的工具

ESLint

是一款JavaScript与JSX代码检测工具，负责代码风格和代码质量检查，让开发人员在代码编译打包时及时发现问题

PS：ESLint不支持HTML、CSS，只支持JS和JSX

Prettier

是一款代码格式化工具，它支持对以下内容的格式化:

JavaScript （包括实验性功能）
JSX
Angular
Vue
Flow
TypeScript
CSS、Less 和 SCSS
HTML
JSON
GraphQL
Markdown，包括 GFM 和 MDX
YAML

提示：
1、Prettier是前端特有的格式化工具，说白了就是 只有前端项目才可以使用，而且Prettier是基于NodeJS开发的，目前据我所知只有vscode、webStrom等开发工具支持，并不是所有开发工具都支持，所以跨开发工具性不好，如果需要跨多个开发工具来统一代码风格的话，要使用editorConfig工具
2、editorConfig工具对各大IDE都能原生支持（vscode 还得用插件来支持），也可以实现部分代码格式化，但功能没有Prettier来得专业和强大，它出现的目的是为了跨多个开发工具来实现统一的配置，所以前端项目一般用Prettier就够了

代码格式化 Prettier

美好代码格式

Prettier使用方式主要有2种

  1. NPM方式
  2. 插件方式（推荐）

一般NPM方式是学习Prettier时使用，实际开发中，都是使用IDE或编辑器自带的Prettier插件（vscode需要手动安装），无须编写命令来执行Prettier这么繁琐，只要一个保存就自动执行

NPM方式

这种方式比较通用，只要有Node环境都可以使用。

第一步：安装

推荐安装在本地，这样版本和配置可以一一对应起来，避免以后因包升级导致与配置文件不相匹配

npm install --save-dev --save-exact prettier
第二步：创建配置文件

在项目根目录创建.prettierrc(.js/json)

第三步：运行
npx prettier --write index.js

插件方式

这种方式比较简单易用，体验优秀。与NPM方式相比，通用性较差，必须使用vscode、webStrom、XHBuilder等开发工具才能使用这种方式，并非所有开发工具都支持，以vscode为例

第一步：安装插件

在vscode中搜索Prettier插件并安装

第二步：创建项目Prettier配置文件

Prettier支持多种配置文件格式，按优先级排序如下：

1、package.json文件中使用"prettier"属性进行配置
2、.prettierrc文件（使用JSON格式） 【推荐】
3、.prettierrc.json文件
4、.prettierrc.js文件
5、.prettierrc.toml文件

第三步：设置vscode

配置settings.json文件

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true  // 保存时格式化
}
第四步：创建 .prettierignore 配置文件

告诉你的Prettier哪些文件不需要格式化

# Ignore artifacts: 
build 
coverage 
dist/

# Ignore all HTML files: 
*.html

PS:
除了根据.prettierignore，prettier还会忽略格式化根目录下的.gitignore文件或则.eslintignore文件所提供的文件列表。所以你看到一般node_modules文件夹不被prettier格式化，因为.gitignore配置了这个文件夹！

配置项

{
    // 超过最大值换行，默认：80，通常设置为：100，120
    "printWidth": 120, 
    // 缩进字节数
    "tabWidth": 4, 
    // 缩进不使用tab，使用空格 一般使用空格便于代码压缩
    "useTabs": false, 
    // 句尾是否添加分号
    "semi": false, 
    // 是否使用单引号
    "singleQuote": true, 
    // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 always：总是有括号
    "arrowParens": "avoid", 
    // 在对象、数组括号与文字间加空格
    "bracketSpacing": true, 
    "jsxBracketSameLine": true,
    // 结尾是 \n \r \n\r 
    "endOfLine": "auto", 
    // 对象中的属性名加引号的方式 as-needed：仅在必须使用引号的对象属性中使用，其他的不需要的不使用
    "quoteProps": "as-needed", 
    // 让prettier按照eslint的代码格式进行校验
    "eslintIntegration": true, 
    // 决定 html 要不要折行
    "htmlWhitespaceSensitivity": "ignore",
    // 在对象或数组最后一个元素后面是否加逗号
    "trailingComma": "all" 
}

代码检测 ESLint

ESLint使用方式主要有2种

  1. NPM方式
  2. 插件方式（推荐）

一般NPM方式是学习ESLint时使用，实际开发中，都是使用IDE或编辑器自带的ESLint插件（vscode需要手动安装），无须编写命令来执行ESLint这么繁琐，只要一个保存就自动执行

NPM方式

这种方式比较通用，只要有Node环境都可以使用。

第一步：安装

推荐安装在本地，这样版本和配置可以一一对应起来，避免以后因包升级导致与配置文件不相匹配

npm install eslint --save-dev

第二步：初始化配置文件

npx eslint --init

Ps：执行上面的命令，将会生产一个配置文件.eslintrc.js(yaml/yml/json)，后面会介绍配置文件

第三步：运行ESLint

npx eslint ./src/*.js
npx eslint .    // 检测当前目录下所有文件（包括子文件）

第四步：修复问题

如果运行ESLint检测出代码有问题，可以通过下面命令进行修复（并不是所有问题都能修复的）

npx eslint ./src/*.js --fix

插件方式

只有在支持插件的IDE或编辑器中，才可以使用此方式

第一步：安装插件

在vscode中搜索ESLint插件并安装

第二步：创建项目ESLint配置文件

ESLint支持几种格式的配置文件:

  • .eslintrc.js
  • .eslintrc.yaml 或 .eslintrc.yml
  • .eslintrc.json
  • .eslintrc（弃用）
  • package.json文件中使用eslintConfig属性进行配置

如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc（弃用）
  6. package.json
第三步：设置vscode
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

editor.formatOnSave 与 editor.codeActionsOnSave 参考
zhuanlan.zhihu.com/p/328189951

配置

plugins 与 rules

eslint提供插件机制，你可以把第三方插件配置在plugins这个选项上，插件命名一般为eslint-plugin-*，配置时可以省略eslint-plugin-前缀

// .eslintrc.js 
// 配置 eslint-plugin-prettier 插件
module.exports = {      
    "plugins": ["prettier"]  
}

插件的作用：给eslint扩展自定义规则，所以必须配合rules选项一起使用才有意义

// .eslintrc.js 

module.exports = {      
    "plugins": ["prettier"],
    "rules": {        
        "prettier/prettier": "error"      // 自定义规则
    }  
}
extends (推荐)

由于eslint插件用法过于复杂（在plugins选项声明插件，还要在rules选项上配置插件对应规则），所以官方提供简便用法，直接使用extends选项

module.exports = { 
    "extends": ["plugin:prettier/recommended"]  // recommended 是插件的configs中的一个
}

解决 Prettier 与 ESLint 冲突问题

冲突产生

当前端项目同时使用vscode编辑器的ESLint和Prettier插件进行代码质量检查和代码风格统一，并开启了保存时自动格式化和自动修复代码的功能时，就会出现如下错误：

image.png

错误的原因：ESLint配置代码风格规则与Prettier代码风格配置冲突，例如：ESLint配置了行末不添加分号的规则，而Prettier设置了行末添加分号配置项，两者出现代码风格上的冲突

保存时先启用了 eslint --fix 修复了，然后又运行了 prettier 格式化，所以屏幕一闪又回到了这个状态。

VScode如何配置？

由于ESLint只对JS文件或JSX文件有作用，其他（HTML/CSS/SCSS/JSON）没有效果，而Prettier对所有前端文件（HTML/CSS/JS/SCSS/JSON等）都有效，所以VScode编辑器配置如下：

{
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false,
    "eslint.validate": ["javascript", "javascriptreact", "vue"]
}

解决方案

冲突的本质在于 eslint 既负责了代码质量检测，又负责了一部分的代码格式美化工作，格式化部分的规则和 prettier冲突。

解决思路：让eslint只负责代码质量检测，让prettier负责代码风格格式化

简单意思就是：prettier接管所有代码格式化工作，把eslint所有代码格式相关规则关闭，社区提供了成熟的解决方案：eslint-config-prettier

eslint-config-prettier
// 安装
npm i eslint-config-prettier -D

// 作用
eslint-config-prettier 用来关掉 (OFF) 所有和 Prettier 冲突的 ESLint 的规则

// .eslintrc.js配置
module.exports = {      
    "extends": ["eslint:recommended","prettier"] // prettier 一定要是最后一个，才能确保覆盖    
}

上面讲的是通用情况，如果你是用在vue项目中，我们可以直接安装@vue/eslint-config-prettier，并在.eslintrc.js中进行配置，如下：

module.exports = {      
    "extends": ["eslint:recommended","@vue/prettier"] // @vue/prettier一定要是最后一个，才能确保覆盖    
}

Ps：@vue/eslint-config-prettier依赖于eslint-config-prettier + eslint-plugin-prettier

eslint-plugin-prettier (可选)

使用eslint-config-prettier包，已经把eslint与prettier冲突解决了，那么这个eslint插件有什么用呢？

是因为我们期望代码格式问题（prettier负责处理）也能在代码上标记出来（更直观），所以必须要用到eslint来报错，使用这个插件，相当于把 Prettier 推荐的格式配置以 ESLint rules 的方式写入，这样相当于可以统一代码问题的来源

// 安装
npm i eslint-plugin-prettier -D 

// .eslintrc.js
module.exports = {      
    "plugins": ["prettier"],      
    "rules": {        
        "prettier/prettier": "error"      
    }    
}

// 把eslint-config-prettier与eslint-plugin-prettier合二为一
module.exports = { 
    // 其余的配置 
    "extends": ["plugin:prettier/recommended"] 
    // 其余的配置 
}

Vetur

是Vue2.x必备的VScode插件，它具有以下功能

1、语法高亮
2、语义高亮
3、快捷片段
4、智能提示
5、格式化
6、错误检测
等等

Vetur只针对.vue文件起作用，换句话说，格式化也只针对.vue文件起作用，其他js/css/html文件都不能用Vetur格式化

由于Vue3.x使用的插件不再是Vetur，而是Volar，所以Vue3.x项目.vue文件要用Volar格式化

// 2.x
"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
}

// 3.x
"[vue]": {
    "editor.defaultFormatter": "johnsoncodehk.volar"
}

参考

Prettier中文网

ESLint中文网

EditorConfig

解决Eslint 和 Prettier 之间的冲突

avatar
文章
阅读
粉丝