前端进阶6-ESLint + Prettier - Ⅱ、实际中配置整个Vue项目（vite-vue3-ts项目）

Ⅱ、实际中配置整个Vue项目（vite-vue3-ts项目）

• 快速创建 vue3-ts 项目（yarn create vite my-vue-app --template vue-ts）

• 安装依赖（yarn）创建git仓库（git init）

• 一、开始集成 ESLint

  • 1 - 安装eslint（npm i eslint -D）
  • 2 - 初始化eslint（npx eslint --init）

  • 3 - 然后我们为package.json文件增加一个lint命令（"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"）

    • lint当前项目中的文件并且开启自动修复
    • --ext作用：指定JavaScript文件扩展名-默认值：.js
    • --fix作用：自动修复

  • 4 - 此时会发现报错，报错原因是eslint不会解析vue文件

    • 这一步本来是在我们继承plugin:vue/essential的时候，默认为我们配置了的
    • 但是我们后续又extend了"plugin:@typescript-eslint/recommended",它又继承来自./node_modules/@typescript-eslint/eslint-plugin/dist/configs/base.js
    • 所以vue-eslint-parser被@typescript-eslint/parser覆盖了。
    • 这里我们只需要将外部的parser改为vue-eslint-parser，并且在parserOptions中添加一个parser:@typescript-eslint/parser属性即可，而这一步我们之前的配置文件里面已经有做了。
  • 5 - 需要额外的解析器来解析vue文件（"parser": "vue-eslint-parser"）
  • 6 - 此时运行yarn run lint不会报错了

• 二、添加vscode-eslint 插件

  • 就不用运行yarn run lint了，会自动检测

  • 同时，我们可以新建一个.vscode/settings.json文件，为这个本项目开启自动修复

    • "editor.codeActionsOnSave"

      • "source.fixAll": true

• 三、集成 Prettier\

  • 1 - 安装Prettier（npm i prettier -D）

  • 2 - 创建.prettierrc.js配置文件

    • printWidth: 80, //单行长度
    • tabWidth: 2, //缩进长度
    • useTabs: false, //使用空格代替tab缩进
    • semi: true, //句末使用分号
    • singleQuote: true, //使用单引号
  • 3 - 然后再package.json中添加一个脚本（"format": "prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}"）
  • 4 - 此时执行yarn run format会把全部文件格式化一次