第十章-安装eslint-plugin-prettier

1.说明

prettier用来格式化代码的。一般IDE都有prettier的插件，在保存的时候格式化代码。那么我们eslint-plugin-prettier就是通过JS来判断代码格式是否正确。一般这很必要，因为不同的程序员有不同的IDE，不同的IDE有不同的prettier插件。但对于项目来说只有一个eslint-plugin-prettier。

而eslint-plugin-prettier插件依赖于prettier依赖。那么eslint-config-prettier插件又是干嘛的?

从npm首页上看，说是解决冲突的，好像prettier和ESLint之间有些规则好像不一样。所以eslint-config-prettier将prettier一些规则默认关闭了。

• 使用ESLint+Prettier来统一前端代码风格
• prettier首页
• prettier的npm首页
• eslint-plugin-prettier的npm首页
• eslint-config-prettier的npm首页

2.安装

yarn add prettier eslint-plugin-prettier eslint-config-prettier --dev

3.配置prettier

prettier的配置项

根目录下创建：prettier.config.js文件。

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  vueIndentScriptAndStyle: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  bracketSpacing: true,
  trailingComma: 'es5',
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'lf',
  rangeStart: 0,
};

4.配置prettier忽略文件

根目录下创建：.prettierignore文件。

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

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

/public/*

5.配置进ESLint

配置ESLint：修改根目录下：.eslintrc.js文件。

module.exports = {
  // ...
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  // ...
};

上一章

第九章-安装@typescript-eslint

下一章

第十一章-自定义ESLint检查规则