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
一些规则默认关闭了。
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检查规则