vue3前端代码格式化实践

vscode配置

安装prettier和eslint两个插件

修改默认格式化工具

建议默认使用prettier来做格式化：左下角进入设置->搜索 editor.defaultFormatter，建议修改工作区就行

prettier

项目安装依赖

css 复制代码

npm i prettier -S

编写配置文件

在项目根目录下新建 prettier.config.js 文件以及忽略文件 .prettierignore

prettier.config.js示例：可以参考官网配置

java 复制代码

module.exports = {
  printWidth: 120, // 超过最大值换行
  tabWidth: 2, // 缩进字节数
  useTabs: false, // 缩进不使用tab，使用空格
  semi: true, // 句尾添加分号
  singleQuote: true, // 使用单引号代替双引号
  proseWrap: 'preserve', // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行 never always
  arrowParens: 'avoid', //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：能省略括号的时候就省略 always：总是省略
  bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  // disableLanguages: ['vue'], // 不格式化vue文件，vue文件的格式化单独设置
  endOfLine: 'auto', // 结尾是 \n \r \n\r auto
  eslintIntegration: true, //不让prettier使用eslint的代码格式进行校验
  htmlWhitespaceSensitivity: 'strict', // strict 所有空格都将认定为是有意义的
  ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  jsxBracketSameLine: false, // 在jsx中把'> ' 是否单独放一行
  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
  // parser: 'babylon', // 格式化的解析器，默认是babylon
  requireConfig: true, // Require a 'prettierconfig' to format prettier
  stylelintIntegration: true, //不让prettier使用stylelint的代码格式进行校验
  trailingComma: 'es5', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  tslintIntegration: true, // 不让prettier使用tslint的代码格式进行校验
  vueIndentScriptAndStyle: true, // 是否在Vue文件中对代码和标签进行缩进，script和style部分
};

.prettierignore示例：

bash 复制代码

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

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

/public/*

eslint

eslint虽然可以格式化和校验代码质量，但配合使用时一般是用来做代码的质量检验安装依赖

eslint：代码质量校验

eslint-plugin-vue：对vue3有更好的支持

eslint-config-prettier：本质上这个工具其实就是禁用掉了一些不必要的以及和Prettier相冲突的ESLint规则

eslint-plugin-prettier：将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化

arduino 复制代码

npm install --save-dev eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-vue

编写配置文件

根目录下新增eslint配置文件 .eslintrc.js 忽略文件 .eslintignore

.eslintrc.js示例：

css 复制代码

module.exports = {
  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: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  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/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/require-explicit-emits': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ],
    'vue/multi-word-component-names': 'off',
  },
};

.eslintignore示例：

bash 复制代码

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

. editorconfig跨端统一格式化

. editorconfig 自定义文件是用来定义编辑器的编码格式规范，编辑器的行为会与 . editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高 。 EditorConfig 插件会读取 . editorconfig 文件中定义的内容，应用于编辑器。

所以 EditorConfig 是用来帮助我们在不同的编辑器中保持编码风格的统一的。

但是他的功能比较简单，只能做一些简单的格式化规范，不过好在他的优先级更高，至少能够让团队有个基本的规范，更多的规范就需要用到prettier了

vscode插件

安装 EditorConfig for VS Code 部分编辑器不需要安装插件

.editorconfig配置

根目录下新建 .editorconfig 文件

只需要安装好插件，并添加配置文件，格式化规则就会自动生效

示例配置：

ini 复制代码

# 顶部的EditorConfig文件
root = true
 
# unix风格的换行符，每个文件都以换行符结尾
[*]
end_of_line = lf
insert_final_newline = true
 
# 用大括号展开符号匹配多个文件
# 设置默认字符集
# 设置所有以.js,.py结尾的文件的编码格式
[*.{js,py}]
charset = utf-8
 
# 使用空格缩进，设置4个空格缩进
[*.py]
indent_style = space
indent_size = 4
 
# 使用制表符(tab)缩进
[Makefile]
indent_style = tab
 
# 设置lib目录下的所有JS的缩进风格(使用空格缩进，缩进占用两个空格的位置)
[lib/**.js]
indent_style = space
indent_size = 2
# 匹配确切文件 package.json或.travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

提交git自动格式化代码

依赖

prettier：上面已经介绍安装过了

husky：提供gitHook相关功能

lint-staged：让命令只对发生更改的文件生效

安装步骤参照官网 www.prettier.cn/docs/instal...

配置commit参照官网 www.prettier.cn/docs/precom... 执行option1即可

安装好之后，会在项目下生成文件.husky，这时已经配置好了，他会在你每次commit之前执行npx lint-staged，这个命令会执行prettier --write，并且只对本次修改的文件生效

prettier配置文件参考上文

win电脑.prettierrc.json写入失败

使用电脑的cmd打开目标文件夹，执行该命令

配置gitHook之后 commit不会自动格式化vue文件

参考package.json中的lint-staged配置：

json 复制代码

"lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ],
    "package.json": [
      "prettier --write"
    ],
    "*.vue": [
      "eslint --fix",
      "prettier --write",
      "stylelint --fix"
    ],
    "*.{scss,less,styl,html}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.md": [
      "prettier --write"
    ]
  }