开发必备:
volar
和 vetur
是一致的,都是针对 vue
的插件(可以这样说, volar
是 vue3
的配套,vetur
是 vue2
的配套);其他推荐:
Yarn 自动清除功能,实现每一次
install
之后、add
之后、yarn autoclean --force
之后。从程序包依赖项中清除并删除不必要的文件。
yarn autoclean --init
执行玩命令之后,Yarn 就会自动在根目录下创建一个.yarnclean
文件。这样就可以了。
在项目根路径新建文件 .editorconfig
在项目中我们最好是使用统一行尾符(建议不管还是 mac 还是 windows 都使用 lf ),但是按上面的配置,我们发现保存的时候无法将 crlf 行尾符转换成 lf 行尾符,当然我们可以直接点击 vscode 的右下角切换行尾符,但终究是有点麻烦,这时使用 .editorconfig 就很有必要了。
# 告诉EditorConfig插件,这是根文件,不用继续往上查找。
root = true
# 匹配全部文件。
[*]
# 使用`utf-8`字符集。
charset=utf-8
# 结尾换行符,可选`lf`、`cr`、`crlf`。
end_of_line=lf
# 在文件结尾插入新行
insert_final_newline=true
# 缩进的样式为空格。
indent_style=space
# 缩进为2
indent_size=2
# 行最大长度为100
max_line_length = 100
# 匹配以`.yml`、`.yaml`、`.json`结尾的文件
[*.{yml,yaml,json}]
indent_style = space
indent_size = 2
# 匹配以`.md`结尾的文件
[*.md]
# 修剪尾随空格
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
在项目根目录看有没有 .vscode
文件夹,若没有,就新建。新建 settings.json
文件:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true
}
一键安装项目推荐的 vscode 插件,新建 extensions.json
文件:
{
"recommendations": [
"vue.volar",
"ms-ceintl.vscode-language-pack-zh-hans",
"mikestead.dotenv",
"donjayamanne.githistory",
"lokalise.i18n-ally",
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"zhucy.project-tree",
"eamodio.gitlens",
"ms-vscode.powershell",
"vscode-icons-team.vscode-icons"
]
}
团队其他成员拉代码后, 打开 vscode, 依次点击 1,2,3, 会自动输入@recommended, 工作区推荐的插件就是 .vscode/extensions.json
文件推荐的。
提交以上文件到 git 代码仓库,在 .gitignore
文件中配置:
node_modules
.DS_Store
dist
.cache
.turbo
.local
# local env files
.env.local
.env.*.local
.eslintcache
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
# .vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
package-lock.json
pnpm-lock.yaml
.history
yarn add -D typescript
根目录下新建 TypeScript 的配置文件:tsconfig.json
文件
{
"compilerOptions": {
// 指定ECMAScript目标版本,esnext为最新版本
"target": "esnext",
// 指定生成哪个模块系统代码,esnext为最新版本
"module": "esnext",
// 决定如何处理模块
"moduleResolution": "node",
// 启用所有严格类型检查选项
"strict": true,
// 禁止对同一个文件的不一致的引用
"forceConsistentCasingInFileNames": true,
// 允许从没有设置默认导出的模块中默认导入这并不影响代码的输出,仅为了类型检查
"allowSyntheticDefaultImports": true,
// 禁用函数参数双向协变检查
"strictFunctionTypes": false,
// 在 .tsx文件里支持JSX
"jsx": "preserve",
// 解析非相对模块名的基准目录查看 模块解析文档了解详情
"baseUrl": ".",
// 允许编译javascript文件
"allowJs": true,
// 生成相应的 .map文件
"sourceMap": true,
"esModuleInterop": true,
"resolveJsonModule": true,
// 若有未使用的局部变量则抛错
"noUnusedLocals": true,
// 若有未使用的参数则抛错
"noUnusedParameters": true,
// 启用实验性的ES装饰器
"experimentalDecorators": true,
// 编译过程中需要引入的库文件的列表
"lib": ["dom", "esnext"],
// 要包含的类型声明文件名列表
"types": ["vite/client"],
// 要包含的类型声明文件路径列表
"typeRoots": ["./node_modules/@types/", "./types"],
"incremental": true,
// 在表达式和声明上有隐含的 any类型时报错
"noImplicitAny": false,
// 忽略所有的声明文件( *.d.ts)的类型检查
"skipLibCheck": true,
// 模块名到基于 baseUrl的路径映射的列表查看 模块解析文档了解详情
"paths": {
"/@/*": ["src/*"],
"/#/*": ["types/*"]
}
},
// 指定一个匹配列表(属于自动指定该路径下的所有ts相关文件)
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"types/**/*.d.ts",
"types/**/*.ts",
"mock/**/*.ts"
],
// 指定一个排除列表(include的反向操作)
"exclude": ["node_modules", "dist", "**/*.js"]
}
ESLint
简单的来说就是去判断你的JS
代码写的格式对不对的一个依赖。没有它你的代码也能运行,有了它你的代码可以写的更漂亮。ESLint
还支持插件,第三方框架会基于ESLint
写出自己的代码检查插件。比如Vue3
对应eslint-plugin-vue
。
yarn add -D eslint eslint-define-config eslint-plugin-vue vue-eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser
vue
官方开发的ESLint
插件;