vue项目配置eslint和prettier

vue项目配置eslint和prettier

1. 配置eslint

1.1 安装依赖

yarn add -D eslint

eslint初始化命令

npx eslint --init

1.2 初始化选项选择

(1) How would you like to use ESLint?
选择：To check syntax, find problems, and enforce code style

(2) What type of modules does your project use?
选择：JavaScript modules (import/export)

(3) Which framework does your project use?
选择：Vue.js

(4) Does your project use TypeScript?
选择：Yes

(5) Where does your code run?
选择：Browser

(6) What format do you want your config file to be in?
选择：JavaScript

(7) Would you like to install them now?
选择：Yes

(8) Which package manager do you want to use?
选择：yarn

1.3 配置.eslintrc.js

此时在项目中会产生一个.eslintrc.js文件，因为eslint默认是不会解析.vue后缀文件的，所以还需要额外的解析器，但初始的.eslintrc.js文件中extends配置顺序原因@typescript-eslint/parser把vue-eslint-parser覆盖了。所以这里需要做些修改，配置如下：

module.exports = {
  'env': {
    'browser': true,
    'es2021': true,
    'node': true
  },
  'extends': [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended'
  ],
  'parser': 'vue-eslint-parser',
  'parserOptions': {
    'ecmaVersion': 'latest',
    'parser': '@typescript-eslint/parser',
    'sourceType': 'module'
  },
  'plugins': [
    'vue',
    '@typescript-eslint'
  ],
  'rules': {
    'vue/multi-word-component-names':'off',
    'quotes': ['error', 'single']
  }
}

当我们启动微信小程序时在根目录会产生dist文件，而这个文件我们也不需要eslite检测，这时候就需要将文件设置为不检测，在根目录新建.eslintignore 文件，将不需要检测文件路径写入其中即可，如下：

# 忽略dist目录下文件的语法检查
/dist

在package.json文件中的scripts中添加lint命令：

{
    "scripts": {
        // eslint . 为指定lint当前项目中的文件
        // --ext 为指定lint哪些后缀的文件
        // --fix 开启自动修复
        "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
    }
}

运行命令即可校验代码，如有其他后缀文件加入即可。

2. 配置prettier

有了eslint，为什么还要有prettier？eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次；

而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持包含js在内的多种语言。

总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观。

2.1 安装依赖包

eslint-config-prettier #eslint兼容的插件
eslint-plugin-prettier #eslint的prettier

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

2.2 prettierrc.json添加规则

// Prettier配置文档：https://prettier.io/docs/en/options.html
module.exports = {
	// 一行最多多少个字符
	printWidth: 800,
	// 指定每个缩进级别的空格数
	tabWidth: 2,
	// 使用制表符而不是空格缩进行
	useTabs: true,
	// 在语句末尾是否需要分号
	semi: false,
	// 是否使用单引号
	singleQuote: true,
	// 更改引用对象属性的事件，可选值"<as-needed|consistent|preserve>"，属性加引号需要加时再加
	quoteProps: "as-needed",
	// 在JSX中使用单引号而不是双引号
	jsxSingleQuote: false,
	// 多属性html标签的‘>’折行放置
	jsxBracketSameLine: false,
	// 后置逗号，多行对象、数组在最后一行增加逗号。结尾逗号使用es5规则，可选值"<none|es5|all>"，默认none
	trailingComma: "es5",
	// 对象括号俩边是否用空格隔开
	bracketSpacing: true,
	// 组件最后的尖括号不另起一行
	bracketSameLine: false,
	// 箭头函数参数永远加括号 always：(x) => x \ avoid：x => x
	arrowParens: "always",
	// 换行方式 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
	proseWrap: "preserve",
	// 无需顶部注释即可格式化
	//requirePragma: false,
	// 在已被preitter格式化的文件顶部加上标注
	//insertPragma: false,
	// 对HTML全局空白不敏感，忽略'>'下落问题
	htmlWhitespaceSensitivity: "ignore",
	// vue 的script和style的内容是否缩进
	vueIndentScriptAndStyle: false,
	// 结束行形式\ n\ r\ n\ r auto
	endOfLine: "lf",
	// 对引用代码进行格式化
	embeddedLanguageFormatting: "auto",
	// 组件或者标签的属性是否控制一行只显示一个属性
	singleAttributePerLine: false,
	//自定义文件后缀对应的parser
	parsers: {
		".nvue": "vue",
		".ux": "vue"
	},
	// 不让prettier使用stylelint的代码格式进行校验
	stylelintIntegration: false,
	// 不让prettier使用eslint的代码格式进行校验
	eslintIntegration: false,
	// 不让prettier使用tslint的代码格式进行校验
	tslintIntegration: false,
	// 不格式化vue文件，vue文件的格式化单独设置
	//disableLanguages: ['vue']
}

2.3 prettierignore忽略文件

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

通过pnpm run lint去检测语法，如果出现不规范格式,通过pnpm run fix 修改

3. 解决eslint和prettier冲突

配置完成prettier肯定会和eslint发生冲突，根本原因就是eslint有部分规则与prettier冲突了，这里社区已经为我们提供了解决方案，即：

eslint-plugin-prettier：基于 prettier 代码风格的 eslint规则，即eslint使用pretter规则来格式化代码。
eslint-config-prettier： 禁用所有与格式相关的 eslint 规则，解决 prettier 与 eslint 规则冲突

安装依赖

yarn add eslint-config-prettier eslint-plugin-prettier -D

接下来在**.eslintrc.js**文件的extends数组末尾加上’plugin:prettier/recommended’,其作用是：

1.继承.prettierrc.js文件规则
2.开启rules的"prettier/prettier": “error”
3.eslint fix同时执行.prettierrc.js格式化

这时候eslint和prettier的冲突算是解决啦。