Vite+Vue3+Ts+Eslint+Prettier+gitHooks+stylelint

阳光啾啾的碎片
421 阅读10分钟

备注:这个命令可以直接安装

image.png

Vite+Vue3+Ts+Eslint+Prettier 流程

以下内容来源于整理www.bilibili.com/video/BV1BV… 加上一点自己的理解（仅供参考，有些地方我不是很懂）

1.创建项目

pnpm create vite vue-test --template vue-ts

问题(1)：使用git bash创建项目会出现方向键不可用的情况
解决(1)：使用window命令（搜索cmd）

image.png

问题(2)：以上就可以正常运行项目了，但会代码会提示找不到模块

image.png

解决(2)：将以下两个文件的moduleResolution改为node，另外allowImportingTsExtensions 已废弃，可以删掉

image.png

2.在vite.config.js中配置server，可以自定义域名端口，自动启动浏览器以及配置代理等

export default defineConfig({
  plugins: [vue()],
  server: {
    host: 'localhost',
    port: 5173,
    open: true,
  },
});

3.配置eslint

（1）安装相关库

ESLint作为主要的代码检查工具，配置适当的规则来确保代码质量和规范性。然后，使用Prettier来负责代码的格式化，确保代码风格的一致性。

eslint 
eslint-plugin-vue
eslint-config-prettier
prettier 
eslint-plugin-import
eslint-plugin-prettier
eslint-config-airbnb-base

以下内容来自chatgpt

  1. ESLint: ESLint是一个用于检测和报告JavaScript代码中潜在问题的静态代码分析工具。它提供了一套可配置的规则，用于强制执行编码约定、检测常见错误和优化代码质量。
  2. eslint-plugin-vue: 这是一个用于在Vue.js代码中运行ESLint规则的插件。它为Vue.js特定的语法和最佳实践提供了额外的规则和支持，帮助开发人员编写更好的Vue.js代码。
  3. eslint-config-prettier: 这是一个ESLint配置规则，用于禁用与Prettier冲突的规则。Prettier是一个代码格式化工具，它有自己的一套格式化规则。通过使用eslint-config-prettier，可以确保ESLint与Prettier之间的规则不会发生冲突，从而实现一致的代码格式化。
  4. Prettier: Prettier是一个代码格式化工具，用于自动格式化代码的样式和排版。它提供了一组预定义的规则，用于统一代码的缩进、换行、空格等方面的格式。Prettier的目标是消除开发人员之间关于代码样式的争论，提供一种一致的代码风格。
  5. eslint-plugin-import: 这是一个用于在JavaScript代码中检测和报告导入/导出模块的规范的ESLint插件。它提供了一组规则，用于确保模块的导入和导出符合一致的编码约定和最佳实践。
  6. eslint-plugin-prettier: 这是一个ESLint插件，用于将Prettier作为一个ESLint规则运行。它允许将Prettier的代码格式化功能与ESLint的规则集成，从而在代码检查过程中自动应用Prettier的格式化。
  7. eslint-config-airbnb-base: 这是一个基于Airbnb JavaScript风格指南的ESLint配置规则集。Airbnb是一个知名的科技公司，他们提供了一套广泛接受的JavaScript编码规范。eslint-config-airbnb-base提供了与Airbnb风格指南一致的ESLint规则配置，可以帮助开发人员遵循一致的编码风格和最佳实践。
pnpm install eslint eslint-plugin-vue eslint-config-prettier prettier eslint-plugin-import eslint-plugin-prettier eslint-config-airbnb-base -D

（2）初始化ESlint

- 方法1 使用npx命令

npx eslint --init

- 方法2：在package.json中配置，使用npm run 命令

"scripts": {
  "lint-init": "eslint --init"
}

再执行

 npm run lint-init

- 方法3：使用npm init命令

npm init @eslint/config

image.png

注意：按空格可以选中选项（实现多选）

（3）配置一些需要的库

pnpm install typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-alias @types/eslint @types/node -D

以下内容来自chatgpt

  1. typescript: TypeScript是一种静态类型的JavaScript超集，它添加了类型注解和编译时类型检查等功能。它允许开发人员在编写JavaScript代码时使用强类型，并提供了更好的代码提示和类型安全性。
  2. @typescript-eslint/parser: 这是一个将TypeScript代码解析为抽象语法树（AST）的ESLint解析器。它允许ESLint在分析和检查TypeScript代码时使用TypeScript特定的语法和类型信息。
  3. @typescript-eslint/eslint-plugin: 这是针对TypeScript代码的ESLint插件。它提供了一套用于检测TypeScript代码中潜在问题的规则，并提供了与TypeScript相关的最佳实践和建议。
  4. eslint-import-resolver-alias: 这是一个ESLint的导入解析器插件，用于解析导入语句中的别名路径。它允许在ESLint中使用别名路径来导入模块，而不仅仅是相对或绝对路径。
  5. @types/eslint: 这是用于支持ESLint的TypeScript类型定义文件。它提供了ESLint的类型声明，使得在TypeScript项目中使用ESLint时可以获得更好的代码补全和类型检查。
  6. @types/node: 这是用于支持Node.js的TypeScript类型定义文件。它提供了Node.js核心模块和API的类型声明，使得在TypeScript项目中编写Node.js代码时可以获得更好的类型支持。

（4）.写eslint配置文件

添加一些需要的规则

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  // "extends": [
  //     "eslint:recommended",
  //     "plugin:@typescript-eslint/recommended",
  //     "plugin:vue/vue3-essential"
  // ],
  //   "eslint-plugin-vue": "^9.17.0",
  //   "eslint-config-airbnb-base": "^15.0.0",
  //   "eslint-config-prettier": "^9.0.0",
  extends: ["plugin:vue/vue3-strongly-recommended", "airbnb-base", "prettier"],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  //  add,
  parser: "vue-eslint-parser",
  parserOptions: {
    // es版本号
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    // 源码类型
    sourceType: "module",
    // 额外的语言类型
    ecmaFeatures: {
      tsx: true,
      jsx: true,
    },
  },
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly",
  },
  plugins: ["@typescript-eslint", "vue"],
  settings: {
    "import/resolver": {
      alias: {
        map: [["@", "./src"]],
      },
    },
    // 允许的扩展名
    "import/extensions": [".js", ".jsx", ".ts", "tsx", ".mjs"],
  },
  // 自定义规则
  rules: {
    "import/no-extraneous-dependencies": 0,
    "no-param-reassign": 0,
    "vue/multi-word-component-names": 0,
    "vue/attribute-hyphenation": 0,
    "vue/v-on-event-hyphenation": 0,
  },
};

可以自己选择规则

image.png

（5）添加识别错误的脚本命令

"lint": "eslint \"src/**/*.{js,vue,ts}\" --fix"

image.png

成功！

（5）安装vite-plugin-eslint

vite-plugin-eslint 提供了更紧密的集成和更广泛的功能，可以在整个开发流程中进行代码规范检查和修正，特别是与 Vite 构建工具结合使用时。它可以提供更全面的代码质量保证和开发体验。

pnpm install vite-plugin-eslint -D

配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), eslintPlugin()],
  server: {
    host: 'localhost',
    port: 5173,
    open: true,
  },
});

(7)安装vscode 插件 （后面需要的一起安装了） image.png （8）配置vscode settin.json

image.png

image.png

4.配置prettier

（1）修改添加常见配置文件

.eslintrcignore

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

# Logs
1ogs
*.log
npm-debug.1og*
yarn-debug.1og*
pnpm-debug.7og*
lerna-debug.log*

.DS_Store
dist-ssr
*.1ocal

/cypress/videos/
/cypress/screenshots/

# Editor directories and files

.vscode
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

components.d.ts

.prettierrc.cjs

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

.prettierignore

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

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

/public/*
components.d.ts

（2）添加命令格式化文档

"prettier-format": "prettier --config .prettierrc.cjs  "src/**/*.{vue,js,ts}" --
write"

pnpm run prettier-format

注释：我理解这些命令是可以去纠正我们的一些语法错误，除了配置这些命令，还可以使用编辑器提供的插件，比如

image.png

（3）配置tsConfig

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "node",
    // "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

5.Husky，lint-staged，commitlint功能

  1. Husky：Husky 是一个 Git 钩子管理器，允许您在 Git 工作流的特定点运行脚本或命令，例如在提交或推送代码之前。它与 Git 生命周期钩子集成，使您能够自动化任务，例如运行测试、格式化代码或执行其他自定义操作。
  2. lint-staged（代码检查阶段）：lint-staged 是一个工具，用于在 Git 提交之前对暂存的文件进行代码检查。它可以配置在提交之前运行静态代码分析工具（如 ESLint、Prettier 等），以确保代码符合指定的编码规范和格式化要求。这样可以避免提交包含潜在问题的代码。
  3. commitlint（提交消息规范）：commitlint 是一个用于规范化提交消息的工具。它可以配置提交消息的格式、结构和内容规则，以确保团队成员编写一致的提交消息。通过定义规范，可以提高代码提交的可读性，方便代码审查、版本控制和代码历史跟踪。

（1）初始化项目（git）

git init

（2）安装相关依赖

pnpm install husky lint-staged @commitlint/cli @commitlint/config-conventional --save-dev

（3）安装husky

"prepare": "husky install"

运行

pnpm run prepare

或使用以下命令

npx husky install

image.png

（4）添加pre-commit钩子

 npx husky add .husky/pre-commit "npx lint-staged"

image.png

（5）添加 lint-staged命令，在提交代码之前，检查代码，并且按规则修复代码

image.png

 "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "npm run prettier-format"
    ]
  }

提交代码是会检查代码内容

image.png

（6）控制提交代码注释

npx husky add .husky/commit-msg "npx --no -- commitlint --edit ${1}"

lint-staged是一个库，这个库安装了需要配置，在那些文件里执行哪些命令。所以才需要在package.json中配置。而 npx lint-staged 是在执行lint-staged这个库，会依赖配置的lint-staged项。

（7）配置提交规范

commitlint.config.cjs

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 校验规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'chore',
        'revert',
        'build',
      ],
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
};

6.配置stylelint

（1）安装相关库

pnpm install --save-dev stylelint stylelint-config-standard

（2）配置.stylelintrc.cjs

module.exports = {
  extends: ['stylelint-config-standard'],
};

（3）执行命令校验css文件

npx stylelint "**/*.css"

image.png

因为之前安装了vscode 的stylelint，此时按一下保存，编辑器会自动纠正css

（4）增加对vue中样式和scss的支持

pnpm install postcss-html postcss stylelint-config-standard-scss stylelint-config-recommended-vue -D
  1. postcss-html：PostCSS的插件，用于处理HTML文件中的样式。
  2. postcss：一个用于转换CSS的工具，它可以通过插件系统来扩展其功能，例如处理CSS预处理器、自动添加浏览器前缀等。
  3. stylelint-config-standard-scss：Stylelint的SCSS规则配置，基于标准规则的扩展，提供了针对SCSS的额外规则。
  4. stylelint-config-recommended-vue：Stylelint的Vue规则配置，基于推荐规则的扩展，提供了针对Vue文件的额外规则。

（5）配置.stylelintrc.cjs

module.exports = {
  extends: [
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue/scss',
  ],
};

（6）添加格式化css命令

"lint:css": "stylelint **/*.{vue,css,scss,less} --fix",

执行 pnpm run lint:css 即可格式化css

(7)添加在钩子函数中，提交代码时格式化css

image.png （8）安装

pnpm install vite-plugin-stylelint -D

（9）添加到vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
import StylelintPlugin from 'vite-plugin-stylelint';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), eslintPlugin(), StylelintPlugin({ fix: true })],
  server: {
    host: 'localhost',
    port: 9999,
    open: true,
  },
});
avatar
文章
阅读
粉丝
相关推荐
完美使用vue3+vite+ts+prettier+eslint
2.0k阅读
 · 
12点赞
为 vite 项目添加 eslint 和 prettier 和 husky
4.8k阅读
 · 
25点赞
vite vue-ts 安装eslint + prettier (2023.03)
335阅读
 · 
2点赞
vue3 解决 ESLint 各类型错误
3.5k阅读
 · 
8点赞
项目中配置了Eslint，但是不生效
3.5k阅读
 · 
1点赞