Vue3+TypeScript 项目中，配置 ESLint 和 Prettier

接上篇：从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios

文档同步项目gitee：https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git

 

一、Eslint：用于检测代码

安装eslint相关依赖

yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

eslint-plugin-vue：仅支持vue，提供的规则可以支持 .vue\js\jsx\ts\tsx 文件校验

@typescript-eslint/parser：解析器，让ESLint拥有规范TypeScript代码的能力

@typescript-eslint/eslint-plugin：插件，包含一系列TypeScript的ESint规则

 

初始化eslint

npx eslint --init

选择项目eslint配置，回车确认，空格多选

√ How would you like to use ESLint? · style    你希望怎样使用eslint
√ What type of modules does your project use? · esm　　你的项目使用什么模块
√ Which framework does your project use? · vue 项目框架
√ Does your project use TypeScript? · No / Yes  是否使用typescript
√ Where does your code run? · browser, node  代码运行在哪
√ How would you like to define a style for your project? ·  guide 项目样式
√ Which style guide do you want to follow? · standard-with-typescript  项目风格
√ What format do you want your config file to be in? · JavaScript  配置文件格式
√ Would you like to install them now? · No / Yes  确认是否安装
√ Which package manager do you want to use? · yarn 安装方式

安装完成，项目根目录生成.eslintrc.cjs文件

// .eslintrc.cjs

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard-with-typescript'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}

在.eslintrc.cjs rules中配置eslint规则细节

rules配置eslint官网：https://eslint.org/docs/latest/rules/ 

腾讯云开发社区中文文档：https://cloud.tencent.com/developer/doc/1078

常用规则，参考：https://blog.csdn.net/ivenqin/article/details/104673237/

eslint-plugin-vue rules：https://eslint.vuejs.org/rules/

我的rules：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

rules: {     "vue/no-v-html": "off",     "vue/script-setup-uses-vars": "off",     "@typescript-eslint/ban-ts-ignore": "off",     "@typescript-eslint/explicit-function-return-type": "off",     "@typescript-eslint/no-explicit-any": "off",     "@typescript-eslint/no-var-requires": "off",     "@typescript-eslint/no-empty-function": "off",     "vue/custom-event-name-casing": "off",     "no-use-before-define": "off",     "@typescript-eslint/no-use-before-define": "off",     "@typescript-eslint/ban-ts-comment": "off",     "@typescript-eslint/ban-types": "off",     "@typescript-eslint/no-non-null-assertion": "off",     "@typescript-eslint/explicit-module-boundary-types": "off",     "@typescript-eslint/no-unused-vars": [       "error",       {         argsIgnorePattern: "^_",         varsIgnorePattern: "^_",       },     ],     "no-unused-vars": [       "error",       {         argsIgnorePattern: "^_",         varsIgnorePattern: "^_",       },     ],     "space-before-function-paren": "off",       "vue/attributes-order": "off",     "vue/one-component-per-file": "off",     "vue/html-closing-bracket-newline": "off",     "vue/max-attributes-per-line": "off",     "vue/multiline-html-element-content-newline": "off",     "vue/singleline-html-element-content-newline": "off",     "vue/attribute-hyphenation": "off",     "vue/require-default-prop": "off",     "vue/require-explicit-emits": "off",     "vue/html-self-closing": [       "error",       {         html: {           void: "always",           normal: "never",           component: "always",         },         svg: "always",         math: "always",       },     ],     "vue/multi-word-component-names": "off",     "vue/no-parsing-error": ["off"],     "eol-last": "off",   },

　　

 

二、Prettier：用于格式化代码

 安装prettier相关依赖

yarn add prettier eslint-config-prettier eslint-plugin-prettier stylelint-config-prettier -D

eslint-config-prettier：解决eslint和prettier冲突

eslint-config-prettier：将prettier作为eslint规则

stylelint-config-prettier：关闭所有不必要的或者有可能与Prettier冲突的规则

 

修改.eslintrc.cjs，配置prettier

?

1 2 3 4 5 6 7 8 9 10 11 12

extends: [   "plugin:prettier/recommended", ], plugins: ["prettier"], rules: {   "prettier/prettier": [     "error",     {       endOfLine: "auto",     },   ], }

　　

修改package.json，配置修复项目格式命令

?

1 2 3

"scripts": {     "lint-fix": "eslint . --fix --ext .json,.d.ts,.ts,.vue src/"   },

执行命令，yarn lint-fix，项目按照eslint-prettier规则进行代码格式化

修改prettier规则：根目录创建.prettierrc文件，示例如下，更多规则参考官网

{
  printWidth: 120, // 超过最大值换行
  tabWidth: 2, // 缩进字节数
  useTabs: false, // 缩进不使用tab，使用空格
  semi: false, // 句尾添加分号
  singleQuote: true, // 使用单引号代替双引号
  arrowParens: "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  ignorePath: ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
  jsxSingleQuote: true, // 在jsx中使用单引号代替双引号
  trailingComma: "all" // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
}

配置完成！