vue3+vite3项目实现保存自动化格式

vue3+vite3项目实现保存自动化格式

1. 安装eslint

npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. 安装prettier

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

3. 在根目录创建.eslintrc.js
   官网链接：https://eslint.bootcss.com/docs/rules/

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parsar: '@typescript-eslint/parsar',
    ecmaVersion: 2020,
    sourceType: 'module'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

4. 在根目录创建.prettierrc.cjs

module.exports = {
  printWidth: 80, // 一行最多80个字符
  tabWidth: 2, // 设置工具每一个水平缩进的空格数
  useTabs: false,//不使用缩进,而使用空格
  semi: false, // 句末是否加分号
  vueIndentScriptAndStyle: true,//Vue文件中＜script＞和＜style＞是否缩进
  singleQuote: true, // 用单引号
  trailingComma: 'none', // 最后一个对象元素符加逗号
  bracketSpacing: true,// 箭头函数,只有一个参数的时候,也需要括号
  arrowParens: 'always', // 不需要写文件开头的 @prettier
  insertPragma: false, // 不需要自动在文件开头加入 @prettier
  endOfLine: 'auto' // 换行符使用 auto 有些地方说的是推荐使用lf
}

5. 在根目录创建.vscode文件夹，在文件夹中创建setting.json文件

{
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "workbench.startupEditor": "none",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "redhat.telemetry.enabled": true,
  "java.jdt.ls.vmargs": "-XX:+UseParallelGC -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xmx1G -Xms100m",
  "tabnine.experimentalAutoImports": true,
  "kite.showWelcomeNotificationOnStartup": false,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "window.zoomLevel": 1,
  "workbench.iconTheme": "vscode-icons",
  "workbench.colorTheme": "One Monokai",
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": true,
  "diffEditor.codeLens": true,
  "editor.minimap.maxColumn": 120,
  "editor.fontSize": 14,
  "workbench.editor.autoLockGroups": {
    "imagePreview.previewEditor": true,
    "mainThreadWebview-markdown.preview": true
  },
  "eslint.alwaysShowStatus": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "scssFormatter.printWidth": 200,
  "scssFormatter.singleQuote": true,
  "editor.tabSize": 2,
  "files.autoSave": "afterDelay",
  "diffEditor.wordWrap": "off",
    // 强制单引号
    "prettier.singleQuote": true,
    // 尽可能控制尾随逗号的打印
    "prettier.trailingComma": "all",
    // 让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true,
	  //autoFix默认开启，只需输入字符串数组即可
    "eslint.validate": [
      "html",
      "vue",
      "vue-html",
      "javascript",
      "javascriptreact"
    ],
    "eslint.options": { //指定vscode的eslint所处理的文件的后缀
      "extensions": [
        ".js",
        ".vue",
        ".ts",
        ".tsx"
      ]
    },
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // 使用插件格式化 html
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter": {
        "html": "prettier",
        "css": "prettier",
        "postcss": "prettier",
        "scss": "prettier",
        "less": "prettier",
        "js": "prettier",
        "ts": "prettier",
        "stylus": "stylus-supremacy"
    },
    // 自动修复
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "eslint.run": "onSave",
    "javascript.format.enable": false，
    "editor.formatOnPaste": true,
    "editor.formatOnType": true
}