初始化一个Vue3项目

创建项目(Vite)

官方文档

在需要创建项目的文件夹内打开cmd
执行命令

npm init vite@latest
1

按照提示进入项目初始化项目

安装eslint

进入项目文件
打开cmd
执行命令

code .
1

表示使用VsCode打开项目

使用快捷键
ctrl+`
打开内置终端

执行eslint初始化命令

官方文档

npm install eslint --D
eslint --init
1
2

接下来的配置按照自己的来配置就行

之后就会多一个eslint的配置文件

详情请见
配置官方中文文档

安装hukey

官方文档

执行以下命令

git init
npm install husky --D
npx husky install
npm pkg set scripts.prepare "husky install"
npm run prepare
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
npx husky add .husky/pre-commit "npm run lint && npm run typecheck"
git add .husky/pre-commit
git commit -m "Keep calm and commit"
1
2
3
4
5
6
7
8
9

但在执行

 npm pkg set scripts.prepare "husky install"
1

我的执行失败，所以决定手动添加

"prepare": "husky install",
"typecheck": "vue-tsc --noEmit --skipLibCheck",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix"
1
2
3

后面加的两条是为了对应

npx husky add .husky/pre-commit "npm run lint && npm run typecheck"
1

该命令的意思是在precommit里添加上npm run lint && npm run typecheck
作用是husky在执行git commit 命令前执行该指令
如果该指令在package.json里没有会报错

测试hukey

安装Commitizen

官方文档

参考文档

执行以下命令

npm install commitizen -g
commitizen init cz-conventional-changelog --save-dev --save-exact
1
2

第二条命令会在package.json里增加一条配置

这时我们提交代码不再使用git commit
而是

npx cz 或者 git cz
1

然后上传到仓库

安装Prettier

官方文档

执行命令安装

npm install --save-dev --save-exact prettier
1

添加配置文件

echo {}> .prettierrc.json
echo {}> .prettierignore
1
2

配置Prettier格式化的两个配置文件

• prettierignore

<!-- prettier需要忽略的文件 供参考 -->
/dist/*
.local
.output.js
/node_modules/**

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

/public/*
1
2
3
4
5
6
7
8
9
10

• prettierrc.json

module.exports = { // https://prettier.io/docs/en/options.html
  arrowParens: 'avoid',
  bracketSameLine: false,
  bracketSpacing: true,
  embeddedLanguageFormatting: 'auto',
  htmlWhitespaceSensitivity: 'css',
  insertPragma: false,
  jsxSingleQuote: false,
  printWidth: 120,
  proseWrap: 'preserve',
  quoteProps: 'as-needed',
  requirePragma: false,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'none',
  useTabs: false,
  vueIndentScriptAndStyle: false,
  overrides: [
    {
      files: '*.html',
      options: {
        parser: 'html',
      },
    },
  ],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

与eslint兼容
官方文档

执行命令

npm install --save-dev eslint-config-prettier
1

在eslintrc.*文件里添加以下内容

VsCode插件安装

• EditorConfig
  官方文档
  
  创建.editorconfig文档
  

# Editor configuration, see http://editorconfig.org
# 该文件有助于为不同的IDE编辑器上处理同一项目的多个开发人员维护一致的编码风格

root = true

[*] # 表示所有文件都适用
charset = utf-8 # 设置文件字符集
indent_style = tab # 缩进风格 tab | space
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型 lf | cr | crlf
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 是否始终在文件末尾插入一个新行
1
2
3
4
5
6
7
8
9
10
11
12

• prettier