vue2项目集成Eslint和prettier

哆啦A梦任意门
909 阅读4分钟

注意：Eslint和prettier如果想要配合使用，需要安装对应的版本，不然可能不兼容

一、ESLint

eslint.png 目前绝大多数前端项目都会用到的 可组装的 JavaScript和 JSX 检查工具。

发现问题

ESLint 静态分析您的代码以快速发现问题。ESLint 内置于大多数文本编辑器中，您可以将ESLint 作为持续集成管道的一部分运行。

自动修复

ESLint 发现的许多问题都可以自动修复。ESLint 修复程序可识别语法，因此您不会遇到传统的查找和替换算法引入的错误。

定制

预处理代码，使用自定义解析器，并编写与 ESLint 内置规则一起使用的自己的规则。您可以自定义 ESLint，使其完全按照项目所需的方式工作。

ESLint: eslint.org/

ESLint 中文网：eslint.bootcss.com/

二、Prettier

prettier.png Prettier 是一个“有主见”的代码格式化工具。

简而言之，这个工具能够使输出代码保持风格一致。

也是目前绝大多数前端项目都会用到的。

正确理解eslint和prettier

Eslint：ESLint 是一款 Lint 工具，主要用于代码的质量检查，同时也具备一定的代码风格的格式化能力；

Prettier：仅仅只是一个代码风格的约束工具，对于代码可能产生的 Bug 等并不关心；

联系：两者都是用来帮助开发者规范代码风格的工具；

区别：

ESLint只能作用于js代码及文件，html、css、json、vue代码及文件的相关格式处理不了；

Prettier全部代码都可以自定义格式化

虽然说 ESLint 其实也具备一定的代码风格的格式化能力，但是在实践中，我们一般采用 ESlint 来做代码质量的约束，用 Prettier 来做代码风格的约束

规则冲突

当 ESLint 的规则和 Prettier 的规则相冲突时，就会发现一个尴尬的问题，用其中一种来格式化代码，另一种就会报错。

prettier 官方提供了一款工具 eslint-config-prettier 来解决这个问题。

本质上这个工具其实就是禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则。

安装依赖：

yarn add -D eslint-config-prettier

修改 eslintrc 文件

// 在 extends 部分加入 prettier 即可
{
  "extends": [
    "...",
    "prettier"
  ]
}

整合使用

上面介绍的工具，仅仅只是将部分 ESLint 规则给禁用了，避免 Prettier 格式化之后的代码导致 ESLint 报错而已，如何将两者结合起来使用呢？

prettier 官方提供了一个 ESLint 插件 eslint-plugin-prettier。

这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。

这样就相当于将 Prettier 整合进了 ESLint 中。

注：：所以在文章最后我只是配置了lint的执行脚本，在执行的时候就可以按照pretter的配置进行校验了，当然你也可以单独配置prettier的执行脚本

安装对应版本号

image.png

项目根目录下创建**## .eslintrc.js文件，.eslintignore文件，.prettierrc.js文件，.prettierignore文件**

.prettierrc.js

module.exports = {
  printWidth: 120, // 一行最多 120 字符(默认80)
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  semi: false, // 行尾需要有分号(默认true)
  singleQuote: true, // 使用单引号（默认false）
  quoteProps: 'as-needed', // 对象的 key 仅在必要时用引号
  jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
  trailingComma: 'none', // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"（默认true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
  arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid:添加括号）
  endOfLine: 'auto' // 行尾换行符
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
    browser: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  globals: {
    envConfig: 'readable'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-unused-vars': 0,
    'vue/no-mutating-props': 0
  }
}

.eslintignore

node_modules
dist

.prettierignore

node_modules
dist
src/assets
package-lock.json

在package.json中添加脚本

"scripts": {
    "lint": "vue-cli-service lint"
 },
avatar
文章
阅读
粉丝