vue3项目引用standard-with-typescript作为代码格式检测

项目用vite脚手架构建

1、先下载eslint

npm install eslint

2、初始化eslint npx eslint --init

前面的选项根据自己的情况选择。 到选择初始化的方式时，我选择的是使用命令交互的方式去初始化，这样更方便生成的配置文件

到下载依赖插件这一步，经验是最好直接同意直接下载，如果这里不同意，之后要自己手动下载

对于vite+vue3+ts项目，我在检查格式时还会产生一些报错

比如ts定义接口关键字interface,会报interface是js预留关键字。 解决办法：

在.eslint.*配置文件解析器项加上并下载：vue-eslint-parser

"parserOptions": {
      "ecmaVersion": "latest",
      "parser": ["@typescript-eslint/parser","vue-eslint-parser"],
      "sourceType": "module",
  },

3、在.eslint.*配置文件的扩展项加上standard-with-typescript

"extends": [
      "eslint:recommended",
      "standard-with-typescript",
      "plugin:vue/vue3-essential",
      "plugin:@typescript-eslint/recommended"
  ],

standardjs链接:standardjs.com/rules

4、最后再根据项目的实际情况修改配置文件。

以下是上面操作后，再根据自身情况调整的最终配置文件，仅供参考

{
  "root": true,
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
      "eslint:recommended",
      "standard-with-typescript", // https://standardjs.com/rules
      "plugin:vue/vue3-essential",
      "plugin:@typescript-eslint/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "parser": ["@typescript-eslint/parser","vue-eslint-parser"],
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx":true
    }
  },
    "plugins": [
        "@typescript-eslint",
        "html",
        "vue"
    ],
    "overrides": [
      {
        "files": ["*.js", "*.jsx"," *.ts", "*.tsx",".vue"],
        "parserOptions": {
          "project": "./tsconfig.json"
        },
        "rules":{}
      }
    ],
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        
        "semi": [
            "error",
            "always"
        ]
    }
}