vue3 vite项目安装eslint

• npm install eslint -D 安装eslint库

• npx eslint --init 初始化配置，按项目实际情况选

  

• 自动生成 eslint.config.js ，可以添加自定义rules

  

• 安装 ESLint 插件

  

  此时打开vue文件就会标红有问题的位置

• 安装prettier npm install prettier eslint-config-prettier eslint-plugin-prettier -D

• 创建 .prettierrc.json

  {
    "semi": false,
    "singleQuote": false,
    "tabWidth": 2,
    "printWidth": 80,
    "trailingComma": "none"
  }

• 安装prettier插件

  

• 打开vscode用户配置 Ctrl + Shift + p -> Settings

  

• 添加内容：

  {
  	  "editor.formatOnSave": true,
  	  "editor.defaultFormatter": "esbenp.prettier-vscode",
  	  "[javascript]": {
  	    "editor.defaultFormatter": "esbenp.prettier-vscode"
  	  },
  	  "[vue]": {
  	    "editor.defaultFormatter": "esbenp.prettier-vscode"
  	  },
  	  "eslint.validate": ["javascript", "vue"],
  	  "eslint.run": "onType",
  	  "eslint.format.enable": true
  }

• 到这里应该就配好了，在vue文件中执行 Ctrl + s 验证保存自动格式化