Vue3项目构建的基本配置:Prettier + Eslint 代码格式化工具

Vue3项目构建的基本配置:Prettier + Eslint 代码格式化工具

editorconfig统一开发格式

可以去github上搜寻.editorconfig统一格式，然后在自己的项目中新建.editorconfig文件，并配置相关代码

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
# https://editorconfig.org	
root = true

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

[*.md]
insert_final_newline = z
trim_trailing_whitespace = false

开发时依赖 代码格式化工具 prettier

1.安装 prettier 和 eslint 并且将他们两个兼容起来
2.安装prettier
npm install prettier -D
3.新建.prettierrc文件来配置文件

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

4.新建.prettierignore文件来忽视不需要代码格式化的文件

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

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

/public/*

4.如果使vscode请安装   如果直接使用的话，prettier和eslint会有冲突，我们可以安装另外两个来使他们兼容，并且按照prettier的代码格式。 npm install eslint-plugin-prettier -D npm install eslint-config-prettier -D
5.并且在.eslintrc.js的文件里的extends属性里最后一行添加配置，这样就能覆盖掉前面的配置，并且能够兼容prettier的代码格式

extends: [
    "plugin:prettier/recommended"
  ],

Commitizen是一个帮助我们编写规范commit message的工具

1.安装Commitizen
npm i commitizen -D
2.安装cz-conventional-changelog并且初始化cz-conventional-changelog: npx commitizen init cz-conventional-changelog --save-dev --save-exact 会自动在pack.json文件中配置

全局安装使用 npx cz 来代替 git commit

代码提交验证

1.commitlint: 安装，制定提交规范（采用默认） npm install --save-dev @commitlint/config-conventional @commitlint/cli 2.新建commit.config.js并配置

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

3.使用husky npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

vue.config.js 基本配置

vue.config.js 是vue-cli的配置文件，而vue-cli是webpack构建 所以可以进行相关的配置 1.配置方式一

outputDir:'./build',
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/component',
      }
    }
  }

2.配置方式二

configureWebpack: (config) => {
config.resolve.alias = {
  '@':path.resolve(__dirname,'src'),
  components:'@/components'
}

}