vue3+ts+eslint保姆级配置指引教程

搭建项目

先使用脚手架搭建一个基础项目(这里我的npm v8.5)

// 第一步
? Project name: » vue-ts

// 第二步
? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
>   TypeScript
    Customize with create-vue ↗
    Nuxt ↗

恭喜你，通过脚手架，基础的vue+ts项目就创建好了。
你可以试着npm install 然后 npm run dev跑起来了。

安装编辑器插件（针对vscode使用者）

需要安装的编辑器插件如下：

• Prettier - Code formatter（格式化）
• eslint
• Stylelint

初始化Eslint环境

npx eslint --init 
==================
? How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style
==================
? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
==================
? Which framework does your project use? ...
  React
> Vue.js
  None of these
==================
Does your project use TypeScript? » No / Yes
==================
空格多选
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node
==================
? How would you like to define a style for your project? ...
  Use a popular style guide
> Answer questions about your style
==================
? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON
==================
? What style of indentation do you use? ...
> Tabs
  Spaces
==================
? What quotes do you use for strings? ...
> Double
  Single
==================
? What line endings do you use? ...
  Unix
> Windows
==================
? Do you require semicolons? » No / Yes  //yes
==================
? Would you like to install them now? » No / Yes   // yes
==================
// 这里随便你吧
? Which package manager do you want to use? ... 
> npm
  yarn
  pnpm

这个时候，你会发现，根目录过了个配置文件.eslintrc.cjs，同时package.json中增加了4个依赖：

"@typescript-eslint/eslint-plugin": "^5.54.1",
"@typescript-eslint/parser": "^5.54.1",
"eslint": "^8.36.0",
"eslint-plugin-vue": "^9.9.0",

我们配置到这里，你可能发现，项目中其实有些文件开始出现那让人讨厌的一抹红色了。但是我们npm run dev一下，发现项目还可以正常运行，这肯定不是我们想要的！我们想让这红色警告也出现在浏览器中！！！
于是我们需要：

// vite.config.ts
...
import eslintPlugin from "vite-plugin-eslint";
...
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      include: ["src/**/*.js", "src/**/*.vue", "src/*.js", "src/**/*.ts", "src/*.ts", "src/*.vue"]
    }),
  ]
})

配置完之后，你发现，控制台和浏览器中已经出现报错了（😊）。

好了，这样是不是就达到目的了？当然不是了…。（我们是为了让代码更优雅，同时也要保证开发效率的，能不能自动修复我这些警告呢？当然是可以呀！）

配置eslint自动修复代码

// .vscode/settings.json内贴入以下代码
{
    "prettier.enable": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": true,
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    },
    "eslint.validate": ["js", "ts", "html", "md", "json", "vue"],
    "stylelint.enable": true,
    "scss.lint.unknownAtRules": "ignore",
    "stylelint.validate": ["css", "scss", "vue"],
    "editor.tabSize": 2,
    "prettier.useTabs": true,
    "editor.formatOnSave": true, // 开启保存文件自动格式化代码
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的代码格式化工具
    "prettier.requireConfig": true // 需要Prettier的配置文件
  }
  
  // .eslintrc文件中贴入以下代码
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
    ecmaFeatures: {
      modules: true
    },
    requireConfigFile: false,
    parser: "@typescript-eslint/parser"
  }，
  rules:{
 	"space-before-function-paren": 0,
	"vue/multi-word-component-names": "off",
	"no-unused-vars": "off",
	"no-debugger": "off",
	eqeqeq: [2, "allow-null"],
	"spaced-comment": 2, 
	"no-var": 2,
	"vue/padding-line-between-blocks": "error",
}

这个时候你会发现，飘红的文件少了，ctrl+s也会自动格式化一些代码了。
但是远远还不够，接下来

配置Prettier自动修复另外一些代码

npm install -D prettier

// 因为eslint和Prettier有些冲突，所以我们需要下面的插件
npm install  -D eslint-config-prettier // eslint兼容的插件
npm install -D eslint-plugin-prettier // eslint的prettier 

配置到这里，基本上没有错误了，如果还有问题，请重启编辑器！

如果还有报错，请到这里👇拷贝eslint配置

vue3项目框架搭建项目源码

一个人学习太辛苦了，欢迎共享前端资源，相互进步（QQ群362909884）