vue3 +TypeScript 配置 ESLint 和 Pre

安装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     

项目根目录创建.eslintrc.cjs文件,例如文件内容配置如下：

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

项目根目录新建.prettierrc.cjs文件，.prettierrc.cjs文件内容：

module.exports = {
    printWidth: 120, // 换行字符串阈值
    tabWidth: 2, // 设置工具每一个水平缩进的空格数
    useTabs: false,
    semi: false, // 句末是否加分号
    vueIndentScriptAndStyle: true,
    singleQuote: true, // 用单引号
    trailingComma: 'none', // 最后一个对象元素符加逗号
    bracketSpacing: true,
    jsxBracketSameLine: true, // jsx > 是否另取一行
    arrowParens: 'always', // 不需要写文件开头的 @prettier
    insertPragma: false, // 不需要自动在文件开头加入 @prettier
    endOfLine: 'auto' // 换行符使用 auto 有些地方说的是推荐使用lf
  }

vscode自动保存配置

项目根目录创建.vscode文件夹，在改文件夹下新建settings.json文件，

settings.json文件内容：

{
  "[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"
  ],
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用带引号替代双引号
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  }
}