个人项目地址： SubTopH前端开发个人站

 

（自己开发的前端功能和UI组件，一些有趣的小功能，感兴趣的伙伴可以访问，欢迎提出更好的想法，私信沟通，网站属于静态页面）

SubTopH前端开发个人站https://subtop.gitee.io/subtoph.github.io/#/home

以上 👆 是个人前端项目，欢迎提出您的建议😊

以下是VSCode代码格式化.editorconfig配置

代码规范

集成editorconfig配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

项目根目录创建.editorconfig文件

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

IDE编辑器默认会读取.editorconfig，但是vscode不会默认读取，需要安装插件

VSCode需要安装一个插件：EditorConfig for VS Code

使用prettier工具（保存时格式化代码）

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

1.安装prettier依赖

npm install prettier -D

2.配置.prettierrc文件

• useTabs：使用tab缩进还是空格缩进，选择false；

• tabWidth：tab是空格的情况下，是几个空格，选择2个；

• printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；

• singleQuote：使用单引号还是双引号，选择true，使用单引号；

• trailingComma：在多行输入的尾逗号是否添加，设置为 none；

• semi：语句末尾是否要加分号，默认值true，选择false表示不加；

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

3.创建.prettierignore忽略文件（忽略不需要格式化的文件）

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

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

/public/*

 4.安装prettier插件（限制于安装插件的vscode有效）

测试？：保存时自动格式化

保存不自动格式化可以在 首先项 - 设置 - 文本编辑器 - 正在格式化 - 2勾选

配置格式化命令，执行格式化所有文件，除了忽略文件

在package.json中配置一个scripts：字段

"prettier": "prettier --write ."

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "prettier": "prettier --write ."
  },

执行 npm run prettier 格式全部文件

使用ESLint检测

如果创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境

没有选择需要创建  .eslintrc.js文件

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
    'plugin:prettier/recommended'                  //使用prettier插件规范
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-var-requires': 'off'
  }
}

VSCode需要安装ESLint插件：

解决eslint和prettier冲突的问题：

安装插件：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装

npm i eslint-plugin-prettier eslint-config-prettier -D

添加prettier插件：（ .eslintrc.js文件中）

 extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'
  ],

git Husky和eslint

虽然我们已经要求项目使用eslint了，但是不能保证组员提交代码之前都将eslint中的问题解决掉了：

• 也就是我们希望保证代码仓库中的代码都是符合eslint规范的；

• 那么我们需要在组员执行 git commit 命令的时候对其进行校验，如果不符合eslint规范，那么自动通过规范进行修复；

那么如何做到这一点呢？可以通过Husky工具：

• husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push

如何使用husky呢？

这里我们可以使用自动配置命令：（自动配置husky）

分别执行2个命令

npx husky-init 
npm install

这里会做三件事：

安装husky相关的依赖：

在项目目录下创建 .husky 文件夹：

 在package.json中添加一个脚本：

 接下来，我们需要去完成一个操作：在进行commit时，执行lint脚本：

 这个时候我们执行git commit的时候会自动对代码进行lint校验