持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

前言

最近在做一个vue3+ts的项目，做一些代码规范和提交规范的配置，分享给大家，希望都有所收获！大佬有没有需要初级前端的，看看我

.editorconfig配置

控制项目代码格式规范，这个非常有必要，不同的idea使用不同的格式，会让我们的项目变得很不规范的，统一团队的代码格式就很有必要

配置所有文件的格式 [*]

charset = utf-8
indent_size = 2 //缩进大小
indent_style = space //缩进风格
end_of_line = lf //换行类型
trim_trailing_whitespace = true //首行任意空白字符去除
insert_final_newline = true // 在文件末尾插入一行

在vscode中需要安装插件editorconfig插件，创建.editorconfig文件

root = true
[*]
charset = utf-8
indent_size = 2 //缩进大小
indent_style = space //缩进风格
end_of_line = lf //换行类型
trim_trailing_whitespace = true //首行任意空白字符去除
insert_final_newline = true // 在文件末尾插入一行

[*.md]
max_line_length = true
trim_trailing_whitespace = false

prettier

代码格式化工具，可以在我们保存代码后自动格式化我们的代码，十分好用

安装

npm i prettier -D

创建.prettierrc


{
  "useTabs": false, //使用tap缩进还是空格
  "tabWidth": 2, //几个空格
  "printWidth": 80,  //行文字长度
  "singleQuote": true,  //单引号还是双
  "trailingComma": "none", //多行输入是否有逗号
  "semi": false  //语句末尾是否加分号
}

插件

prettier-code formatter

在package.json中配置"prettier": "prettier --write ." 就可以直接使用命令npm run prettier格式化项目全部代码


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

ESLint

ESLint是代码检测工具，配合prettier使用体验极佳，但让是配置好的，配置不好会冲突

防止与prettier冲突，加这俩包

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

配置.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'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

git

设置代码提交规范，防止提交垃圾代码，代码拦截，看看是否符合规范

npx husky-init ; npm i //会生成pre-commit文件

在pre-commit中配置

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run prepare

npm i commitizen -D
npx commitizen init cz-conventional-changelog --save-dev --save-exact

代码提交验证

npm i @commitlint/config-conventional @commitlint/cli -D

配置文件

在commitlint.config.js文件中配置

module.exports = {
  extends: ['@commitlint/config-conventional']
}

创建cpmmit-msg文件

npx husky add .husky/commit-msg
npx --no-install commitlint --edit $1

配置cpmmit-msg

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint --edit

package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "prettier": "prettier --write .",
  "prepare": "husky install",
  "commit": "cz"
},

配置别名

vue.config.js,这个文件会和webpack.config.js合并 @代表src文件夹

module.exports = {
  outputDir: './build',
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    }
  }
}

区分环境变量

在vue项目中可以直接配置

.env.development

.env.production

.env.test

三个文件，然后在文件中配置环境变量

通过

process.env.变量名读取

还可以配置环境变量文件，然后在main中引入


let BASE_URL = ''
let BASE_NAME = ''
if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://scc/org'
  BASE_NAME = 'scc'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://xb/org'
  BASE_NAME = 'xb'
} else if (process.env.NODE_ENV === 'test') {
  BASE_URL = 'http://dhy/org'
  BASE_NAME = 'dhy'
}
export { BASE_URL, BASE_NAME }

结束

项目配置到此结束，如果有补充我在评论区加上，感谢各位光临。动动小手点个赞吧

VUE项目环境配置

前言