eslint与prettier之间的配置

对eslint与prettier之间的关系，一直感到迷糊，直到最近看的一则视频，才对这两者有了新的认识，纯属菜鸟入门学习中。使用vue-cli创建一个新的vue3项目时，突发奇想，想自己配置一下prettier。以下是我的个人步骤

1. 创建完成后，先安装

npm install prettier -D

2. 配置.prettierrc文件：在根目录下创建一个文件名为.prettierrc的文件，在此文件当中配置相关prettier的信息

• useTabs:使用tab缩进还是空格缩进，选择false；
• tabWidth: tab是空格情况下，缩进几个空格，
• printWidth：单行字符长度，当超过你设定的字符长度是，保存格式化为多行
• trailingComma:在多行输入的尾逗号是否添加，设置为none；根据个人习惯
• semi:语句末尾是否要加分号

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": true
}

3. 创建.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

到这个时候进入任何一个vue文件时，ctrl+s保存，会将你所设定的格式进行代码格式化。当时由于你的项目在创建会发生eslint+prettier，因此此时你的代码会报错或者发出警告，解决办法。

1. 安装插件，

npm i eslint-plugin-prettier eslint-config-prettier -D

一般情况下，你的node_module下已经有了eslint-plugin-prettier eslint-config-prettier，不需要再次安装。 2. 在你的项目当中有一个.eslintrc.js文件，将其中的extends下的配置更改为下属：

  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'
  ],