vite完整项目demo vite+eslint+vue3+typeScript+prettier+lint-staged+husky超简单配置

1 安装vite+Vue+typeScript （项目在最后面附上）

文档安装

2.安装 eslint

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

//配置
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
  ],
  rules: {
    "no-bitwise": 2,
    "no-array-constructor": 2, //禁止使用数组构造器
    "no-alert": 0, //禁止使用alert confirm
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "always",
          normal: "always",
          component: "always",
        },
        svg: "always",
        math: "always",
      },
    ],
    "vue/html-closing-bracket-newline": [
      "error",
      {
        singleline: "never",
        multiline: "never",
      },
    ],
  },
};
//1.如果没生效重新启动VScode
//2.还是不行 npm i eslint-plugin-vue@next -D  后期换成  npm i eslint-plugin-vue -D 无影响

3.安装prettier

   npm i prettier eslint-config-prettier eslint-plugin-prettier -D
// "off" or 0 - 关闭规则
// "warn" or 1 - 将规则视为一个警告（不会影响退出码）
// "error" or 2 - 将规则视为一个错误 (退出码为1)
module.exports = {
  root: true,
  env: {
    node: true,
  },
  plugins: ["prettier"],
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "prettier",
  ],
  rules: {
    "no-bitwise": 2,
    "no-array-constructor": 2, //禁止使用数组构造器
    "no-alert": 0, //禁止使用alert confirm
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "always",
          normal: "always",
          component: "always",
        },
        svg: "always",
        math: "always",
      },
    ],
    "vue/html-closing-bracket-newline": [
      "error",
      {
        singleline: "never",
        multiline: "never",
      },
    ],
  
    "prettier/prettier": [
      "error", 
      { tabWidth: 2, endOfLine: "auto", useTabs: false, semi: true },  //此处配置prettier
    ],
  },
};

   //1 没有生效重启VScode

4.全局安装 mrm

npm install -g mrm mrm-task-lint-staged
mrm lint-staged
//package.json 最底部
  "lint-staged": {
    "*.(js|vue)": [
      "eslint --cache --fix",
      "git add"
    ]
  }

5.Vscode 插件安装

1.Prettier - Code formatter
2.ESLint
3.Prettier配置 打开配置settings.json 最底部
 "prettier": {
    // 一行最多 100 字符
    "printWidth": 110,
    // 使用 2 个空格缩进
    "tabWidth": 2,
    // 不使用缩进符，而使用空格
    useTabs": false,
    /行尾需要有分号
    "semi": true,
   // 使用单引号
   "singleQuote": false,
    // 对象的 key 仅在必要时用引号
    "quoteProps": "as-needed",
    // jsx 不使用单引号，而使用双引号
    "jsxSingleQuote": false,
    // 末尾不需要逗号
    "trailingComma": "none",
    // 大括号内的首尾需要空格
    "bracketSpacing": true,
    // jsx 标签的反尖括号需要换行
    "jsxBracketSameLine": false,
    // 箭头函数，只有一个参数的时候，也需要括号
    "arrowParens": "always",
    // 每个文件格式化的范围是文件的全部内容
    "rangeStart": 0,
    "rangeEnd": "Infinity",
    // 使用默认的折行标准
    "proseWrap": "preserve",
    // 换行符使用 lf
    "endOfLine": "auto"
 },

6.外

1.代码编译时eslint报错依旧可以编译
2.vueCli 有非常完美的支持可以开箱即用
3.目前项目demo 已经完成附上https://gitee.com/wflm/vue3-ts--vite