vue 集成 eslint 规范

参考链接
项目基础模板链接

vscode 基础配置

• 安装eslint pretterier插件

添加相关配置

项目添加eslint相关配置

安装依赖

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

根目录下新建 .eslintrc.js，配置如下

// 需要安装依赖:  npm i eslint-define-config
const { defineConfig } = require("eslint-define-config");

module.exports = defineConfig({
  root: true,
  /* 指定如何解析语法。*/
  parser: "vue-eslint-parser",
  /* 优先级低于parse的语法解析配置 */
  parserOptions: {
    parser: "@typescript-eslint/parser",
  },
  // https://eslint.bootcss.com/docs/user-guide/configuring#specifying-globals
  globals: {
    Nullable: true,
  },
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    // 'plugin:vue/vue3-recommended',
    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.

    "plugin:vue/vue3-recommended",
    // 此条内容开启会导致 全局定义的 ts 类型报  no-undef 错误，因为
    // https://cn.eslint.org/docs/rules/
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended", // typescript-eslint推荐规则,
    "prettier",
    "plugin:prettier/recommended",
  ],
  rules: {
    // 'no-undef': 'off',
    // 禁止使用 var
    "no-var": "error",
    semi: "off",
    // 优先使用 interface 而不是 type
    "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "vue/html-indent": [
      "error",
      4,
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: true,
        ignores: [],
      },
    ],
    // 关闭此规则 使用 prettier 的格式化规则， 感觉prettier 更加合理，
    // 而且一起使用会有冲突
    "vue/max-attributes-per-line": ["off"],
    // 强制使用驼峰命名
    "vue/component-name-in-template-casing": [
      "error",
      "PascalCase",
      {
        registeredComponentsOnly: false,
        ignores: [],
      },
    ],
  },
});

根目录下新建 .eslintignore，配置如下

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.eslintrc.js
prettier.config.js
/src/mock/*

prettier

根目录下新建 .prettierrc.ts，配置如下

module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 4 个空格缩进
  tabWidth: 4,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾不需要有分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: "as-needed",
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 尾随逗号
  trailingComma: "all",
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: "always",
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: "preserve",
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: "css",
  // 换行符使用 lf
  endOfLine: "lf",
};

根目录下新建.prettierignore，配置如下

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

添加格式化命令

在package,json 中添加配置

"pre": "prettier --write ."

git 前提交校验

1. 安装插件

cnpm i pre-commit --save

2. 配置

  "scripts": {
    "lint": "eslint --fix --ext .js,.vue src",
  },
   "pre-commit": [
    "lint"
  ],

忽视eslint文件校验

在 .eslintignore 文件

build/*.js
src/assets
public
dist
src/utils