一篇文章教会你项目中一些常用的配置

一骑绝尘蛙
900 阅读5分钟

大家好我是熊草，最近学到一些新知识在此做些记录及对掘友进行知识的分享，大家知道在项目中对一个项目的代码编写规范是必不可少的所以为了方便我们前端开发人员进行多人开发，通常我们需要对代码进行统一管理，这时候我们就需要一些配置文件来管理我们的项目，来提高我们对项目的管理，维护及开发效率

.editorconfig文件配置

这是为了方便统一多人开发的代码风格的配置，首先我们下载一个插件EditorConfig for VS Code

image.png

通常进行下面配置（注释有其解释）

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 # 始终在文件末尾插入一个新行

.prettierrc配置文件 .prettierignore忽略文件

image.png

常用的代码格式化配置，一般都是安装Prettier - Code formatter插件然后通过.prettierrc配置文件来进行配置(配置选项地址 )下面为常用配置

有时候别人vscode没有插件，为了统一格式我们可以在开发环境安装prettier,npm install prettier -D, 然后再通过配置格式化文件来进行格式化

{
  "useTabs": false, // 使用tab键还是空格键
  "tabWidth": 2, // tab键是空格情况下是几个空格
  "printWidth": 100, // 超出长度换行
  "singleQuote": false, // 使用单引号还是双引号 true是单引号
  "trailingComma": "es5", // 多行输入尾逗号是否添加 none不添加
  "semi": false // 语句末尾是否加分号
}

如果需要格式化所有需要格式化文件我们可以配置一个命令来进行格式化，在package.json文件中进行如下配置

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

然后再集成终端运行命令即可（忽略文件不会涉及）

.prettierignore忽略文件就是忽略一些不需要校验的文件

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

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

/public/*

.eslintrc.js

image.png

eslint是我们常用的用来校验代码规范的规则，建议vscode首先下载一个ESLint插件， eslint配置规则 通常cli的项目选了ts及eslint后自动生成文件

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',
    '@typescript-eslint/no-explicit-any': 'off'
  }
}

Husky配置

用来git提交代码时对代码进行操作，用来保证提交时代码一致

先安装：npm husky-init && npm install,这里相当于做了三部操作

  1. 安装husky相关依赖

image.png

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

image.png

  1. 在package.json中添加脚本

image.png

在.husky文件中的pre-commit进行一下修改把原先npm test改成 npm run lint，让commit时对代码进行格式化及校验

image.png

Commitizen

安装工具npm install commitizen -D

安装cz-conventional-chaangelog,并且初始化cz-conventional-chaangelog npx commitizen init cz-conventional-changelog --save-dev --save-exact这个命令会帮我们安装cz-conventional-chaangelog并且在package.json中进行配置

这时候我们提交代码就可以使用npx cz,执行命令后会出现以下步骤

image.png

  1. 让我们选择提交类型
type作用
feat新增特性
fix修复bug
docs修改文档
style代码格式修改
refactor代码重构
perf改善性能
test测试
build变更项目构建或外部依赖(例如scopec: webpack,gulp,npm等)
ci更改持续集成软件配置文件和package中的scripts命令，例如scopes:Travis,Circle
chore变更构建流程或者辅助工具(比如更改测试环境)
revert代码回退
  1. 选择本次修改范围

image.png

  1. 写对应描述（88个字符）

image.png

  1. 增加更长的描述（可以直接回车跳过）

image.png

5.是比较大的更新（回车默认是NO）

image.png

6.改变是否影响open issues（公司项目一般没有，一般开源项目才有，回车默认NO）

image.png

然后我们就可以通过git log看到我们的提交日志是否比较规范了

image.png

Commitlint

通过上面的方法还是不能阻止组员使用git commit命令来随意提交所以我们需要利用另一个工具来限制其它人不规范提交

安装工具npm i @commitlint/config-conventional @commitlint/cli -D,然后在跟，目录新建commitlint.config.js文件

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

然后使用husky创建commit-msg文件（不要手动创建）npx husky add .husky/commit-msg "npx --no-install commitlint --edit $l

在package.json中配置commit命令

image.png

然后就可以直接执行npm run commit 来进行提交

vue.config.js

个人建议先去学一学webpack,更有利于配置一些参数，如果不会webpack也可以参考cli文档对应文档来进行配置

以下是常用的三种配置方式

const path = require('path')

module.exports = {
  // 1.配置方式一: CLI提供的属性
  outputDir: './build',
  publicPath: './',
  // 2.配置方式二: 和webpack属性完全一致, 最后会进行合并
  // configureWebpack: {
  //   resolve: {
  //     alias: {
  //       components: '@/components'
  //     }
  //   }
  // },
  // configureWebpack: (config) => {
  //   config.resolve.alias = {
  //     '@': path.resolve(__dirname, 'src'),
  //     components: '@/components'
  //   }
  // }
  // 3.配置方式三:
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      .set('components', '@/components')
  }
}

结尾

以上是一些项目创建是常用的配置方法，本人也是刚学习而来，记录的同时分享给大家，希望大家一起学习，后续学到更多在做补充，如果有不足之处希望大家多多指教共同进步🤗

avatar
文章
阅读
粉丝