vue3+vite 项目中配置prettier_vue3 prettier

良好的代码规范无论是对个人还是团队都是十分重要的。遵循一致的代码规范能够显著增强代码可读性、可维护性，使得代码结构简洁清晰，还能减少bug的出现。对于团队开发来说，还能减少部分沟通成本，让大家都专注于功能开发上。

Prettier 简介
Prettier 是一款代码格式美化工具，用于统一代码风格，提高代码可维护性。
ESLint

• 内置规则和自定义规则共用一套规则 API
• 内置的格式化方法和自定义的格式化方法共用一套格式化 API
• 额外的规则和格式化方法能够在运行时指定
• 规则和对应的格式化方法并不强制捆绑使用

ESLint 结合 Prettier 使用
美化代码结构的Prettier，检查代码质量的ESLint，强强结合会碰撞出什么样的火花呢？

1. 安装
要使用ESLint和Prettier当然先得安装他们啦，然后还需要安装 eslint-plugin-prettier。
为了防止Prettier和ESLint格式化功能冲突，还需要安装 eslint-config-prettier 来关闭ESLint中的代码格式化功能

npm install --save-dev --save-exact prettier
npm install eslint --save-dev
​
npm install --save-dev eslint-plugin-prettier
npm install --save-dev eslint-config-prettier
1
2
3
4
5

在 .prettierignore 和 .eslintignore 文件中可以添加那些不需要格式化的文件或文件夹，在美化代码挑bug时忽略这些文件。

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

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

/public/*

1
2
3
4
5
6
7
8
9
10
11

// .eslintignore

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2. 配置
ESLint中添加Prettier插件的配置文件
.eslintrc.js

// .eslintrc.js

// @ts-check
const { defineConfig } = require('eslint-define-config');

module.exports = defineConfig({
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  rules: {
    'vue/script-setup-uses-vars': 'error',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    'vue/custom-event-name-casing': 'off',
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    'no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    'space-before-function-paren': 'off',

    'vue/attributes-order': 'off',
    'vue/v-on-event-hyphenation': 'off',
    'vue/multi-word-component-names': 'off',
    'vue/one-component-per-file': 'off',
    'vue/html-closing-bracket-newline': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/attribute-hyphenation': 'off',
    'vue/require-default-prop': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ],
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

prettier.config.js

// prettier.config.js
module.exports = {
	// 一行最多多少个字符
	printWidth: 150,
	// 指定每个缩进级别的空格数
	tabWidth: 2,
	// 使用制表符而不是空格缩进行
	useTabs: true,
	// 在语句末尾是否需要分号
	semi: true,
	// 是否使用单引号
	singleQuote: true,
	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
	quoteProps: 'as-needed',
	// 在JSX中使用单引号而不是双引号
	jsxSingleQuote: false,
	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
	trailingComma: 'es5',
	// 在对象文字中的括号之间打印空格
	bracketSpacing: true,
	// jsx 标签的反尖括号需要换行
	jsxBracketSameLine: false,
	// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
	arrowParens: 'always',
	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
	rangeStart: 0,
	rangeEnd: Infinity,
	// 指定要使用的解析器，不需要写文件开头的 @prettier
	requirePragma: false,
	// 不需要自动在文件开头插入 @prettier
	insertPragma: false,
	// 使用默认的折行标准 always\never\preserve
	proseWrap: 'preserve',
	// 指定HTML文件的全局空格敏感度 css\strict\ignore
	htmlWhitespaceSensitivity: 'css',
	// Vue文件脚本和样式标签缩进
	vueIndentScriptAndStyle: false,
	//在 windows 操作系统中换行符通常是回车 (CR) 加换行分隔符 (LF)，也就是回车换行(CRLF)，
	//然而在 Linux 和 Unix 中只使用简单的换行分隔符 (LF)。
	//对应的控制字符为 "\n" (LF) 和 "\r\n"(CRLF)。auto意为保持现有的行尾
	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
	endOfLine: 'auto',
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

**3.VSCode 配置 ESLint Prettier **
在VSCode 中使用ESLint 和Prettier需要先安装下插件。
ESLint，Prettier


之后需要在 setting.json 中配置

 //配置prettier
 "editor.minimap.enabled": false,
 // "editor.formatOnPaste": true,
 "editor.formatOnSave": true,
 "editor.lineNumbers": "on",
 "editor.quickSuggestions": {
   "other": true,
   "comments": true,
   "strings": true
 },
 "eslint.run": "onSave",
 "editor.codeActionsOnSave": {
   "source.fixAll": false,
   "source.fixAll.eslint": true //保存自动修复
 },

 "prettier.useTabs": false, //使用制表符缩进
 "prettier.semi": false, //去掉代码结尾的分号
 "prettier.singleQuote": true, //使用单引号替代双引号
 "prettier.trailingComma": "none", //去除对象最末尾元素跟随的逗号
 "prettier.printWidth": 200, //指定代码长度，超出换行
 "prettier.requireConfig": false, //需要prettier.requireConfig格式化
 "prettier.useEditorConfig": false,
 "prettier.eslintIntegration": true, //不让prettier使用eslint的代码格式进行校验

 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
 "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
 "vetur.format.defaultFormatterOptions": {
   "js-beautify-html": {
     "wrap_attributes": "force-aligned" //属性强制折行对齐
   }
 },
 "path-autocomplete.extensionOnImport": true,
 "path-autocomplete.pathMappings": {
   "@": "${folder}/src"
 },
 "emmet.syntaxProfiles": {
   "vue-html": "html",
   "vue": "html"
 },
 "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
 "eslint.options": {
   "plugins": ["html"]
 },

 "prettier.documentSelectors": ["settings"],
 "[html]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
"editor.tabSize": 2,
 "editor.formatOnPaste": true,
 "eslint.format.enable": true,
 "[jsonc]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

以上是我本地项目的配置，好用给个赞❤️