vue3项目配置

配置项目：

• 前端框架：Vue 3.x
• 构建工具：Vite 2.x
• 代码规范：ESLint
• 提交规范：husky 、lint-staged

npm：

mac安装

curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm 
// 或者
curl -fsSL https://get.pnpm.io/install.sh | sh -

vite：

安装

pnpm create vite

别名配置

vite.config配置

resolve: {
  alias: {
    '@': path.resolve(__dirname, './src'),
  },
},

tsconfig.json配置

"baseUrl": ".",
"paths": {
  "@/*": [
    "src/*"
  ]
},

Eslint代码规范：

vue3项目：

eslint+prettier+volar

1.在.vscode创建文件

extensions.json:

{
  "recommendations": [ // 在vscode中推荐安装插件
    "johnsoncodehk.volar", // volar
    "dbaeumer.vscode-eslint" // eslint
  ]
}

2.安装需要的包

    "@typescript-eslint/parser", // ts解析器
    "@typescript-eslint/eslint-plugin", // 为 TypeScript 代码库提供 lint 规则的 ESLint 插件
    "eslint": "^8.9.0",
    "eslint-config-prettier", // 关闭eslint所有不必要或可能与Prettier冲突的规则。
    "eslint-plugin-prettier", // Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
    "eslint-plugin-vue", // vue lint扩展插件
    "vue-eslint-parser", // vue解析器
    "prettier",

3.安装好后创建.eslintrc.js文件

.eslintrc.js：

module.exports = {
  root: true,
  // https://github.com/vuejs/vue-eslint-parser#parseroptionsparser
  // 解析器
  parser: "vue-eslint-parser", // vue解析器
  parserOptions: {
    parser: "@typescript-eslint/parser", //自定义ts解析器
  },

  // 插件，增加规则rule，需要在rule或者extends中使用
  plugins: ["@typescript-eslint", "prettier"],

  // 类似于eslint风格或者插件或者规范的最佳实践，相同的规则后面的覆盖前面的
  extends: [
    "plugin:@typescript-eslint/recommended",
    // https://github.com/vuejs/eslint-plugin-vue/blob/44ff0e02cd0fd08b8cd7dee0127dbb5590446323/docs/user-guide/README.md#conflict-with-prettier
    "plugin:vue/vue3-recommended",
    "prettier",
  ],
  // 自定义规则，优先级最高
  rules: {
    "prettier/prettier": "warn", // 被prettier标记的地方抛出黄色警告
  },
};

了解parser、plugins、extends、rules的含义

parser：解析器，eslint读不懂ts和vue，所以需要指定解析器

plugins：插件，用于拓展rules，全量使用就加入到extends中，部分使用加入rules中

extends：使用的一些规则集合，常用于引入一些官方的最佳实践

rules：手动进行自定义规则

4.然后启用自动保存

在.vscode文件夹下创建settings.json文件

settings.json：配置参考

{
  // 在保存时运行的代码操作类型。
  "editor.codeActionsOnSave": {
    // 开启eslint自动修复js/ts/jsx/tsx功能
    "source.fixAll.eslint": true
  },
  // 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // jsonc是有注释的json
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "eslint.codeActionsOnSave.mode": "problems",
  // 将json文件识别为jsonc格式
  "files.associations": {
    "*.json": "jsonc",
  },
}

提交规范

husky + lint-staged

husky版本是7.x，lint-staged版本是12x

不同版本可能不一样

husky

// 下载
npm install husky --save-dev
// 安装
npx husky install

然后在package.json中加入

{
  "scripts": {
    "prepare": "husky install"
  }
}

这是在每次pnpm install的时候安装husky

// 创建 hook
npx husky add .husky/pre-commit "pnpm pre-commit"

也可以自己手动在**.husky**文件夹下添加文件和修改文件内容

Lint-staged

// 下载
npm install Lint-staged --save-dev

根据我们前面的配置修改package.json

{
	"scripts": {
    "prepare": "husky install",
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,ts,vue}": "eslint --fix"
  }
}

设置完成后每次提交的代码就被执行eslint --fix