eslint+prettier+vue3 formatting

1. Install and configure eslint in the project.

Refer to the official website to execute the following command

npm init @eslint/config 
等价于 
npm install eslint -D  //安装eslint
npx eslint --init //初始化配置eslint

After execution, there will be some configuration options, select as needed. The following are the choices to be made according to the current project needs of the individual, which can be used as a reference. After execution, there will be an additional .eslintrc.js file in the project for subsequent eslint configuration.

2. Configure .eslintrc.js and .prettierrc files

eslint provides two types of rules: rules for checking formatting and rules for checking code quality. After all, eslint restricts the code specification through rules, and the focus of the rules is not on the code style, so eslint alone cannot completely unify the code style.

Prettier is only responsible for code formatting, not code quality management. Prettier is used to unify code style optimization. There are not many parameters supported by prettier, and all parameters have default values. If you need to change the default configuration, create a new .prettierrc.js file to configure specific values. Refer to prettier config . The parameters are explained as follows:

module.exports = {
    printWidth: 80,                    //（默认值）单行代码超出 80 个字符自动换行
    tabWidth: 2,                       //（默认值）一个 tab 键缩进相当于 2 个空格
    useTabs: true,                     // 行缩进使用 tab 键代替空格
    semi: false,                       //（默认值）语句的末尾加上分号
    singleQuote: true,                 // 使用单引号
    quoteProps: 'as-needed',           //（默认值）仅仅当必须的时候才会加上双引号
    jsxSingleQuote: true,              // 在 JSX 中使用单引号
    trailingComma: 'all',              // 不用在多行的逗号分隔的句法结构的最后一行的末尾加上逗号
    bracketSpacing: true,              //（默认值）在括号和对象的文字之间加上一个空格
    jsxBracketSameLine: true,          // 把 > 符号放在多行的 JSX 元素的最后一行
    arrowParens: 'avoid',              // 当箭头函数中只有一个参数的时候可以忽略括弧
    htmlWhitespaceSensitivity: 'ignore', // vue template 中的结束标签结尾尖括号掉到了下一行
    vueIndentScriptAndStyle: false,    //（默认值）对于 .vue 文件，不缩进 <script> 和 <style> 里的内容
    embeddedLanguageFormatting: 'auto', //（默认值）允许自动格式化内嵌的代码块
};

Question 1 : Both eslint and prettier can control the code style, and conflicts may arise at this time. There is already a very mature solution, namely eslint-config-prettier + eslint-plugin-prettier .

• eslint-config-prettier: Turn off rules that conflict with prettier in eslint.

• eslint-plugin-prettier: eslint uses prettier rules to beautify the code style.

Add a configuration at the end of extends in .eslintrc.js. At this time, prettier and eslint can cooperate without conflict, and the code can be automatically repaired and formatted when saving.

extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended', // 增加的配置
],

Question 2 : The template in the .vue file parsed by eslint is invalid. eslint-plugin-vue is a plug-in for code verification of .vue files. Some extensions of the plug-in are as follows. The vue3 used in personal projects, the selected plugin:vue/vue3-recommended.

plugin:vue/base：基础
plugin:vue/essential：预防错误的（用于 Vue 2.x）
plugin:vue/recommended：推荐的，最小化任意选择和认知开销（用于 Vue 2.x）；
plugin:vue/strongly-recommended：强烈推荐，提高可读性（用于 Vue 2.x）；
plugin:vue/vue3-essential：（用于 Vue 3.x）
plugin:vue/vue3-strongly-recommended：（用于 Vue 3.x）
plugin:vue/vue3-recommended：（用于 Vue 3.x）

After configuring the eslint-plugin-vue plug-in and extends, the template verification will still fail. In this case, you need to configure the parser vue-eslint-parser corresponding to the eslint-plugin-vue plug-in . vue-eslint-parser can parse the content of the template, but not JS, so another parser @typescript-eslint/parser needs to be configured .

• vue-eslint-parser: Configured outside, eslint can parse the content in the <template> tag

• @typescript-eslint/parser: Configured in parserOptions to parse the code in the <script> tag in the vue file.

The specific configuration is as follows:

parser: 'vue-eslint-parser', // 解析<template>标签中的内容
 parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser', // 解析vue文件中<script>标签内容
    sourceType: 'module',
},

Question 3: You can use the following command to detect whether there are any plug-ins that are not installed in the .eslintrc.js file, and ensure that eslint can only work after all plug-ins are installed.

npx eslint 文件名

3. Configure the .editorconfig file

.editorConfig focuses on unifying editor coding style configuration, and simple formatting of various types of single files. It provides few configuration parameters, which are listed below.

# 已经是顶层配置文件，不必继续向上搜索
root = true
[*]
# 编码字符集
charset = utf-8
# 缩进风格是空格
indent_style = space
# 一个缩进占用两个空格，因没有设置tab_with，一个Tab占用2列
indent_size = 2
# 换行符 lf
end_of_line = lf
# 文件以一个空白行结尾
insert_final_newline = true
# 去除行首的任意空白字符
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

You can see that there are some duplicate configurations in .editorConfig and .prettierrc, for example, both provide indented configuration parameters. It is recommended to set the two parameters to be consistent in practical applications. Some caveats are as follows:

• There are differences in the configuration of different editors. For editors such as vscode, you need to install the editorconfig plug-in by yourself

• The editor behaves as defined in the .editorconfig file, which takes precedence over the editor's own settings. For example, in the editor vscode, when indent_size in .editorConfig and editor.tabSize in settings.json configure the number of tab spaces at the same time, indent_size takes effect first.

• When .editorconfig configures indentation, the priority is not as high as that in the .eslintrc.js file, but the two do not conflict. Using them together can make the code style more elegant.