Vue3 Tools Armoury

Appearance

代码美化-prettier ​

1. 安装 ​

  • 首先在vscode插件商店安装Prettier - Code formatter

  • 在插件上面邮件选择添加到工作区

  • 在.vscode/settings.json中修改如下配置

json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "eslint.useFlatConfig": true,
  "eslint.workingDirectories": ["."],
  "stylelint.validate": ["css", "scss", "vue"],
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "es5"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "es5"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "es5"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "es5"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "es5"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "es5"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "es5"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "es5"
  },
  "prettier.requireConfig": true,
  "prettier.useEditorConfig": false,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.eol": "\n"
}

项目中安装 ​

在根目录新建文件 ​

  • prettier.config.ts

  • 代码如下

js
export default {
  // 使用单引号 (true：单引号，false：双引号)
  singleQuote: true,
  // 结尾不用分号 (true：有，false：没有)
  semi: false,
  // 缩进制表符宽度 | 空格数
  tabWidth: 2,
  // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
  trailingComma: "es5",
  // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
  useTabs: false,
  // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
  endOfLine: "auto",
  // 指定最大换行长度
  printWidth: 120,
  // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
  quoteProps: "as-needed",
  // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
  jsxSingleQuote: false,
  // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
  bracketSpacing: true,
  // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
  bracketSameLine: false,
  // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
  arrowParens: "avoid",
  // 指定要使用的解析器，不需要写文件开头的 @prettier
  requirePragma: false,
  // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
  insertPragma: false,
  // 用于控制文本是否应该被换行以及如何进行换行
  proseWrap: "preserve",
  // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
  htmlWhitespaceSensitivity: "css",
  // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
  vueIndentScriptAndStyle: false,
  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
  rangeStart: 0,
  rangeEnd: Infinity,
};

修改package.json ​

json
"lint:prettier": "prettier --write \"**/*.{js,ts,mjs,cjs,json,tsx,css,less,scss,vue,html,md}\""

ESlint与 Prettier冲突 ​

代码格式上的冲突 我们在运行项目的时候，需要注意ESlint和Prettier这两个文件的配置项，有时候报错是因为这两个文件的配置项不一致导致的，

让Prettier来接管ESlint的格式化，用来覆盖 ESLint 本身的规则配置，关掉所有和 Prettier 冲突的 ESLint 的配置 将 Prettier 集成到现有的 ESLint 工具中:

在eslint.config.ts 中新增加配置 ​

js

import js from '@eslint/js'
import tseslint from '@typescript-eslint/eslint-plugin'
import tsparser from '@typescript-eslint/parser'
import prettierConfig from 'eslint-config-prettier'
import vue from 'eslint-plugin-vue'
import { defineConfig } from 'eslint/config'
import vueParser from 'vue-eslint-parser'

export default defineConfig([
  // 基础 JavaScript 推荐配置
  js.configs.recommended,

  // Vue 3 推荐配置
  ...vue.configs['flat/recommended'],

  // 全局配置
  {
    files: ['**/*.{js,ts,tsx,vue}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: {
        // Node.js 全局变量
        process: 'readonly',
        Buffer: 'readonly',
        __dirname: 'readonly',
        __filename: 'readonly',
        // 浏览器全局变量
        window: 'readonly',
        document: 'readonly',
        console: 'readonly',
        alert: 'readonly',
        setTimeout: false,
        clearTimeout: false,
        setInterval: false,
        clearInterval: false,
      },
    },
    rules: {
      // 通用规则
      'no-console': 'off',
      'no-debugger': 'error',
      'no-unused-vars': 'off', // 由 TypeScript 插件处理
      'prefer-const': 'error',
      'no-var': 'error',
      // 代码风格
      indent: 'off', // 由 Prettier 处理缩进
      quotes: ['error', 'single'],
      semi: ['error', 'never'],
      // 空行规则 - 最多允许 1 个连续空行
      'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1, maxBOF: 0 }],
      'no-trailing-spaces': 'error',
      'eol-last': ['error', 'always'],
      'padded-blocks': ['error', 'never'],
      'comma-dangle': ['error', 'never'],
    },
  },

  // TypeScript 文件配置
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: tsparser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
    },
    plugins: {
      '@typescript-eslint': tseslint as any,
    },
    rules: {
      // TypeScript 特定规则
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/explicit-function-return-type': 'off',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      'comma-dangle': ['error', 'never'],
    },
  },

  // Vue 文件配置
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        parser: tsparser,
        extraFileExtensions: ['.vue'],
      },
    },
    plugins: {
      vue,
      '@typescript-eslint': tseslint as any,
    },
    rules: {
      // Vue 特定规则
      'vue/no-v-html': 'off',
      'vue/multi-word-component-names': 'off',
      'vue/no-unused-vars': 'error',
      'vue/no-multiple-template-root': 'off',
      'vue/singleline-html-element-content-newline': 'off',
      'vue/max-attributes-per-line': 'off',
      'vue/html-self-closing': [
        'error',
        {
          html: {
            void: 'never',
            normal: 'always',
            component: 'always',
          },
          svg: 'always',
          math: 'always',
        },
      ],
      // TypeScript 规则在 Vue 文件中
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/no-explicit-any': 'off',
      // 空行规则 - 最多允许 1 个连续空行
      'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1, maxBOF: 0 }],
      'no-trailing-spaces': 'error',
      'eol-last': ['error', 'always'],
      'padded-blocks': ['error', 'never'],
    },
  },

  // 忽略文件
  {
    ignores: [
      // 依赖
      'node_modules/**',
      '**/node_modules/**',
      // 构建产物
      '**/dist/**',
      // '**/build/**',
      '**/.vitepress/dist/**',
      '**/.vitepress/cache/**',
      '**/*.min.js',
      '**/*.min.css',
      // Turbo 缓存
      '**/.turbo/**',
      '.turbo/**',
      // 测试覆盖率
      'coverage/**',
      '**/coverage/**',
      // 编辑器
      '.vscode/**',
      '.idea/**',
      // 日志
      '**/*.log',
      // 锁文件
      'pnpm-lock.yaml',
      'package-lock.json',
      'yarn.lock',
      // Git
      '.git/**',
      // 临时文件
      '**/*.tmp',
      '.cache/**',
      '**/.cache/**',
    ],
  },

  // Prettier 配置 - 必须放在最后，用于关闭与 Prettier 冲突的规则
  prettierConfig,

  // 重新启用某些格式规则，让 ESLint 能够检测格式错误
  {
    files: ['**/*.{js,ts,tsx,vue}'],
    rules: {
      // 重新启用格式规则，即使 Prettier 会处理它们
      // 这样可以在编辑器中看到错误提示
      semi: ['error', 'never'],
      quotes: ['error', 'single'],
      'comma-dangle': ['error', 'always-multiline'],
      indent: 'off', // 由 Prettier 处理缩进
    },
  },
])

在 package.json 中添加 lint-staged 配置，指定在提交时要检查的文件及对应的命令。 ​

json
  "lint-staged": {
    "**/*.{js.mjs,cjs,vue}": "eslint --fix",
    "*.{js,mjs,cjs,vue,json,css,less,scss,vue,html,md}": "prettier --write"
  },

最后一步 ​

重启编辑器，让配置生效。

总结 ​

这样做 prettier 就会接管 eslint 的格式化，并且关掉所有和 prettier 冲突的 eslint 的配置，这样 prettier 就不会报错了。

网站备案号:津ICP备15001525号-2