前端进阶6-ESLint + Prettier - Ⅴ、总结规范流程（vue3-vite-ts项目）

Ⅴ、总结规范流程（vue3-vite-ts项目）

• 第一步

  • 1 - 初始化项目（yarn create vite [项目名称]）yarn create vite my-vue-app --template vue-ts

    • 安装依赖（npm i）

• 第二步

  • 2 - 初始化ESLint规则（npx eslint --init）

    • 为package.json文件增加一个lint命令（"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"）
    • 添加.eslintrc.js配置（"parser": "vue-eslint-parser",）

• 第三步

  • 3 - 安装Prettier工具（npm i prettier eslint-config-prettier eslint-plugin-prettier -D）

    • 然后再package.json中添加一个脚本（"format": "prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}"）

  • 4 - 配置Prettier规则（新建.prettierrc.js）

    • 配置自定义规则

      • "printWidth": 120,——单行长度
      • "semi": false,——句末使用分号
      • "singleQuote": true,——使用单引号
      • "trailingComma": "all",——多行时尽可能打印尾随逗号
      • "bracketSpacing": false,——在对象文字中的括号之间打印空格-eg: { foo: bar }
      • "jsxBracketSameLine": true,——多属性html标签的‘>’折行放置
      • "arrowParens": "avoid",——单参数箭头函数参数周围使用圆括号-eg: (x) => x
      • "insertPragma": true,——在已被preitter格式化的文件顶部加上标注
      • "tabWidth": 2,——缩进长度
      • "useTabs": false——使用空格代替tab缩进

• 5 - 接着修改.eslintrc.js文件，引入prettier

  • extends: [ 'plugin:prettier/recommended' ]
  • plugins: [ 'prettier' ]