安裝eslint

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

安裝prettier

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

項(xiàng)目根目錄創(chuàng)建.eslintrc.cjs文件,例如文件內(nèi)容配置如下：

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'
  }
}

項(xiàng)目根目錄新建.prettierrc.cjs文件登刺，.prettierrc.cjs文件內(nèi)容：

module.exports = {
    printWidth: 120, // 換行字符串閾值
    tabWidth: 2, // 設(shè)置工具每一個(gè)水平縮進(jìn)的空格數(shù)
    useTabs: false,
    semi: false, // 句末是否加分號(hào)
    vueIndentScriptAndStyle: true,
    singleQuote: true, // 用單引號(hào)
    trailingComma: 'none', // 最后一個(gè)對(duì)象元素符加逗號(hào)
    bracketSpacing: true,
    jsxBracketSameLine: true, // jsx > 是否另取一行
    arrowParens: 'always', // 不需要寫文件開(kāi)頭的 @prettier
    insertPragma: false, // 不需要自動(dòng)在文件開(kāi)頭加入 @prettier
    endOfLine: 'auto' // 換行符使用 auto 有些地方說(shuō)的是推薦使用lf
  }

vscode自動(dòng)保存配置

項(xiàng)目根目錄創(chuàng)建.vscode文件夾卢厂，在改文件夾下新建settings.json文件沟沙，

settings.json文件內(nèi)容：

{
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "typescript",
    "typescriptreact"
  ],
  //  #去掉代碼結(jié)尾的分號(hào)
  "prettier.semi": false,
  //  #使用帶引號(hào)替代雙引號(hào)
  "prettier.singleQuote": true,
  //  #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #這個(gè)按用戶自身習(xí)慣選擇
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue組件中html代碼格式化樣式
    }
  }
}