网站首页 > 教程文章 正文
一些刚刚毕业的同学在拿到公司的项目,或者说在git上clone下一些源代码进行学习的时候,总是被一些以前没有见过的文件和配置搞懵,这个系列文章从项目一开始说起,来聊聊我们前端项目中的一些规范。
项目风格统一
在前端项目中存在 .vscode 文件夹,文件夹下一般存在两个文件 extensions.json 和 setting.json 。作用是保持所有开发者安装了相同的插件和相同的配置,保持开发环境一致性。
extensions.json
在当前项目中,需要安装哪些插件。
{"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]}
如果需要添加需要安装的插件,可以直接在插件中心里面找到对应的插件,点击 添加到工作区 即可
常用 extensions.json 配置
{"recommendations": ["vue.volar","vue.vscode-typescript-vue-plugin","hollowtree.vue-snippets","dbaeumer.vscode-eslint","stylelint.vscode-stylelint","esbenp.prettier-vscode","editorconfig.editorconfig","streetsidesoftware.code-spell-checker","syler.sass-indented","mikestead.dotenv","formulahendry.auto-rename-tag","dsznajder.es7-react-js-snippets","vincaslt.highlight-matching-tag","oderwat.indent-rainbow","techer.open-in-browser","ritwickdey.liveserver"]}
查看当前工作区推荐
settings.json
项目统一的vscode用户设置,和vscode全局配置冲突,会覆盖全局 settings.json 配置
{"editor.fontSize": 16,"editor.formatOnType": true,// 保存文件时自动用 prettier 格式化"editor.formatOnSave": true,"files.autoSave": "afterDelay","editor.codeActionsOnSave": {"source.fixAll.stylelint": true},//指定哪些文件不参与搜索"search.exclude": {"**/node_modules": true,"**/*.log": true,"**/*.log*": true,"**/bower_components": true,"**/dist": true,"**/elehukouben": true,"**/.git": true,"**/.gitignore": true,"**/.svn": true,"**/.DS_Store": true,"**/.idea": true,"**/.vscode": false,"**/yarn.lock": true,"**/tmp": true,"out": true,"dist": true,"node_modules": true,"CHANGELOG.md": true,"examples": true,"res": true,"screenshots": true,"yarn-error.log": true,"**/.yarn": true},// 指定哪些文件不被 VSCode 监听,预防启动 VSCode 时扫描的文件太多,导致 CPU 占用过高"files.watcherExclude": {"**/.git/objects/**": true,"**/.git/subtree-cache/**": true,"**/.vscode/**": true,"**/node_modules/**": true,"**/tmp/**": true,"**/bower_components/**": true,"**/dist/**": true,"**/yarn.lock": true},"stylelint.enable": true,"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass", "html"],"editor.tabSize": 2,"editor.defaultFormatter": "esbenp.prettier-vscode","files.eol": "\n",// 配置 VScode 使用 prettier 的 formatter"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[markdown]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},//拼写错误忽略"cSpell.words": ["windi","browserslist","tailwindcss","esnext","axios","vuex","vueuse","antv","tinymce","qrcode","sider","pinia","sider","nprogress","INTLIFY","stylelint","esno","vitejs","sortablejs","mockjs","codemirror","iconify","commitlint","vditor","vite","echarts","cropperjs","logicflow","zxcvbn","lintstagedrc","brotli","tailwindcss","sider","pnpm","antd"]}
EditorConfig 配置
EditorConfig 帮助开发人员在 不同的编辑器 和 IDE 之间定义和维护一致的编码样式。
1、安装 VSCode 插件(EditorConfig )
2、配置 EditorConfig(.editorconfig)
# EditorConfig is awesome: https://EditorConfig.org# top-most EditorConfig fileroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8end_of_line = lf # 控制换行类型(lf | cr | crlf)insert_final_newline = true # 始终在文件末尾插入一个新行indent_style = space # 缩进风格(tab | space)indent_size = 2 # 缩进大小max_line_length = 120 # 最大行长度[*.md] # 表示仅对 md 文件适用以下规则max_line_length = off # 关闭最大行长度限制trim_trailing_whitespace = false # 关闭末尾空格修剪
pnpm
pnpm 是一个 JavaScript 包管理器,与 npm 和 yarn 类似,用于在项目中管理依赖项。与 npm 和 yarn 不同的是,pnpm 采用符号链接的方式来管理依赖项,以减少磁盘空间的占用和依赖项的安装时间。
安装
npmipnpm-g配置阿里源
pnpmconfigsetregistryhttps://registry.npmmirror.com常用命令
总的来说,你不用担心又要学习一个新玩意,除了在包的安装方式上不一样,更小的安装空间,更少的错误发生,使用方式几乎和npm一模一样。
原理上,pnpm使用符号链接(软链接)和硬链接来构建 node_modules 目录。比如说,如果要下载 lodash 包,使用 pnpm 安装 loadsh 依赖项, pnpm 会先检查本地存储库中是否已经安装了 lodash 的版本。如果已经安装,则会将 lodash 的符号链接添加到项目中。如果没有安装,则会从 npm 存储库中下载 lodash ,并将其添加到本地存储库中。这种方式可以避免在每个项目中都安装一份相同的依赖项,减少磁盘空间的占用和依赖项的安装时间。
同时,pnpm还能很好的避免 影子依赖 。比如,我们已经下载了一个依赖项。该依赖项中如果已经依赖了 lodash ,那么,如果我们使用的npm,那么我们可以直接在项目中使用 lodash 了。 你可能会疑惑,这不是一个很好的事情吗?并不是,当我们在不知情的情况下,删除或者升级了原来的依赖项,那么很有可能伴随着lodash也会被删除或者升级。这就会给我们的项目造成困扰。使用pnpm,就可以很好的排除这种情况。
RECOMMEND
猜你喜欢
- 2025-08-26 说说对苹果新系统macOS Big Sur的体验
- 2025-08-26 我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊
- 最近发表
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- mybatis plus page (35)
- vue @scroll (38)
- 堆栈区别 (33)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)
- redis aof rdb 区别 (33)
- 302跳转 (33)
- http method (35)
- js array splice (33)
