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

一只闪亮的鸭
3,462 阅读4分钟

前言

一、为什么要整合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-vue
  rules: {

  }
}

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文件的<template>和<script>块进行检查，不能检查<style>中的语法错误。

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虽然可以检查<style>中的格式化错误，但不能检查语法错误。因此需要Vetur中的Validation: Style。

image-20211105102133004

如上图，Vetur中默认就是打开Validation: Style的，而借助eslint-plugin-vue已经可以检查<template>和<script>块，因此可以关闭Vetur对这两部分的检查。

下面附上相关的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
    }
}

参考

avatar
文章
阅读
粉丝