阅读 3186

vite+vue3+ts+eslint+prettier

1 用ESLint来规范Typescript代码

cnpm i typescript eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
复制代码

这三个依赖分别是:

  • eslint: ESLint的核心代码
  • @typescript-eslint/parser:ESLint的解析器,用于解析typescript,从而检查和规范Typescript代码
  • @typescript-eslint/eslint-plugin:这是一个ESLint插件,包含了各类定义好的检测Typescript代码的规范

2 结合Prettier和ESLint

cnpm i prettier eslint-config-prettier eslint-plugin-prettier -D
复制代码

其中:

  • prettier:prettier插件的核心代码
  • eslint-config-prettier:解决ESLint中的样式规范和prettier中样式规范的冲突,以prettier的样式规范为准,使ESLint中的样式规范自动失效
  • eslint-plugin-prettier:将prettier作为ESLint规范来使用

eslint配置如下:

/**
 * @module .eslintrc
 * @author: huoyou
 * @description: eslint配置
 */

module.exports = {
  roottrue,
  env: {
    browsertrue,
    es2021true,
    nodetrue
  },
  /* 指定如何解析语法。可以为空,但若不为空,只能配该值,原因见下文。*/
  parser'vue-eslint-parser',
  /* 优先级低于parse的语法解析配置 */
  parserOptions: {
    parser'@typescript-eslint/parser'// Specifies the ESLint parser
    ecmaVersion2020// Allows for the parsing of modern ECMAScript features
    sourceType'module'// Allows for the use of imports
    ecmaFeatures: {
      // tsx: true, // Allows for the parsing of JSX
      jsxtrue
    }
  },
  /* 扩展配置,加一些插件 */
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'// typescript-eslint推荐规则
    'prettier/@typescript-eslint'// 使得@typescript-eslint中的样式规范失效,遵循prettier中的样式规范
    'plugin:prettier/recommended' // 使用prettier中的样式规范,且如果使得ESLint会检测prettier的格式问题,同样将格式问题以error的形式抛出. 确保在最后一个.
  ],
  rules: {}
};
复制代码

prettier配置如下:

/**
 * @module .prettierrc
 * @author: huoyou
 * @description: prettier配置
 */

module.exports = {
  printWidth160// 单行输出(不折行)的(最大)长度
  tabWidth2// 每个缩进级别的空格数
  tabsfalse// 使用制表符 (tab) 缩进行而不是空格 (space)。
  semitrue// 是否在语句末尾打印分号
  singleQuotetrue// 是否使用单引号
  quoteProps'as-needed'// 仅在需要时在对象属性周围添加引号
  bracketSpacingtrue// 是否在对象属性添加空格
  jsxBracketSameLinetrue// 将 > 多行 JSX 元素放在最后一行的末尾,而不是单独放在下一行(不适用于自闭元素),默认false,这里选择>不另起一行
  htmlWhitespaceSensitivity'ignore'// 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的
  trailingComma'none'// 去除对象最末尾元素跟随的逗号
  useTabsfalse// 不使用缩进符,而使用空格
  jsxSingleQuotefalse// jsx 不使用单引号,而使用双引号
  arrowParens'always'// 箭头函数,只有一个参数的时候,也需要括号
  rangeStart0// 每个文件格式化的范围是文件的全部内容
  proseWrap'always'// 当超出print width(上面有这个参数)时就折行
  endOfLine'lf' // 换行符使用 lf
};
复制代码

settings.json配置如下:

"editor.defaultFormatter""esbenp.prettier-vscode"// 设置默认格式化工具为prettier
复制代码

3 husky和lint-staged构建代码工作流

在 commit 之前,将暂存区的内容做一次 代码检查代码美化,再添加到暂存区,然后再 commit

cnpm i husky lint-staged -D
复制代码
  1. husky 是一个为 git 客户端增加 hook 的工具。比如 pre-commit 钩子就会在你执行 git commit 的触发。
  2. lint-staged 是一个在 git 暂存文件上(也就是被 git add 的文件)运行已配置的 linter(或其他)任务。lint-staged 总是将所有暂存文件的列表传递给任务。 package.json配置如下:
"husky": {
  "hooks": {
    "pre-commit""lint-staged"
  }
},
"lint-staged": {
  "*.{.ts,.tsx}": [
    "prettier --write",
    "eslint --cache --fix",
    "git add"
  ]
}
复制代码

4 vscode保存自动格式化

vscode安装eslint、prettier

settings.json配置如下:

"editor.formatOnSave"true// 是否开启vscode的保存自动格式化
"editor.codeActionsOnSave": {
  "source.fixAll.eslint"true
},
"eslint.format.enable"true //是否开启vscode的eslint
复制代码

完整package.json配置如下:

{
  "name""vite-demo",
  "version""0.0.0",
  "scripts": {
    "dev""vite",
    "build""vite build",
    "lint""eslint src --fix --ext .ts,.tsx "
  },
  "dependencies": {
    "axios""^0.21.1",
    "vue""^3.0.4",
    "vue-router""^4.0.2",
    "vuex""^4.0.0-rc.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin""^4.11.1",
    "@typescript-eslint/parser""^4.11.1",
    "@vue/compiler-sfc""^3.0.4",
    "eslint""^7.16.0",
    "eslint-config-prettier""^7.1.0",
    "eslint-plugin-prettier""^3.3.0",
    "eslint-plugin-vue""^7.4.0",
    "husky""^4.3.6",
    "lint-staged""^10.5.3",
    "prettier""^2.2.1",
    "typescript""^4.1.3",
    "vite""^1.0.0-rc.13"
  },
  "husky": {
    "hooks": {
      "pre-commit""lint-staged"
    }
  },
  "lint-staged": {
    "*.{.ts,.tsx}": [
      "prettier --write",
      "eslint --cache --fix",
      "git add"
    ]
  }
}

复制代码
文章分类
前端
文章标签