vue项目Eslint和prettier结合使用

一、eslint介绍——代码语法检查工具

Eslint是一个代码检查工具，用来检查你的代码语法是否符合指定的规范,ECMAScript标准

二、prettier插件——代码格式化工具

prettier是一款优秀的代码格式化工具，它并不关心你的语法是否正确，只关心你的代码格式，比如是否使用单引号，语句结尾是否使用分号等等，它可以把格式错乱的代码转化为符合标准的漂亮代码，prettier支持格式化的语言有：JavaScript，TypeScript，Flow，JSX，JSON，CSS，SCSS，Less，HTML，Vue，Angular，GraphQL，Markdown，YAML。

prettier也开发了一款vscode的插件，可以在vscode中搜索安装

(更加建议在项目中安装prettier,因为这样可以在多人开发中保持代码风格一致)

三、Vetur 插件——Vue代码高亮显示的一款插件

四、Eslint 依赖

4.1、babel-eslint——用于ESLint的Babel解析器的包装器

babel-eslint现在是@babel/eslint-parser

babel是一个转码器，比如可以将ES6的代码转换为ES5的代码，从而在适配环境下运行

我什么时候应该使用babel-eslint？

ESLint的默认解析器和核心规则只支持最新的最终ECMAScript标准，不支持Babel提供的实验性（如新特性）和non-standard（如流或TypeScript类型）语法。babel-eslint是一个解析器，它允许ESLint在Babel转换的源代码上运行。

使用:要使用babel-eslint， 注意：官方文档中描述的4.2、eslint-plugin-vue——Vue.js的官方ESLint插件

eslint-plugin-vue可以用来检查<template>和.vue里的<script>错误并有效追踪提示，非常方便定位

安装: npm i eslint-plugin-vue -D

4.3、@vue/cli-plugin-eslint——eslint 与 vue 整合包

集体安装:五、prettier依赖

5.1、 eslint-config-prettier ——解决Prettier和 ESLint的冲突

处理方式:禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则

安装:npm install --save-dev eslint-config-prettier

修改 eslintrc 文件,在 extends 部分加入 prettier 即可

5.2、eslint-plugin-prettier——解决Prettier和 ESLint的冲突(更完美版)

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

安装依赖:

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

npm install --save-dev prettier

修改 eslintrc 文件

{

5.3、prettier-eslint-cli

这是一个CLI，允许您在一个或多个文件上使用安装: yarn add --dev prettier-eslint-cli

prettier-eslint 与 prettier-eslint-cli 区别?

• prettier-eslint 只能处理字符串

• prettier-eslint-cli 能处理一个或多个文件

• 默认情况下，prettier-eslint-cli 先运行 prettier，再运行eslint --fix

集体安装:

六、配置Eslint

在项目的根目录下，新建.eslintrc.js 文件,例如:

// .eslintrc
module.exports = {
  plugins: ['prettier'],
  parser: "vue-eslint-parser",
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    parser: 'babel-eslint',
  },
  rules: {
    'prettier/prettier': 'error',
    "parser": 0
  },
  extends: ['plugin:prettier/recommended'],
};

七、Prettier 配置,

根目录新建.prettierrc.js,例如:

module.exports = {
  // 行末分号
  semi: false,
  // 单引号
  singleQuote: true,
}