Vscode编辑器：解读文件结构、插件的导入导出、常用快捷键&配置技巧及其常见问题的解决方案

一、文件与文件夹结构

1.文件结构

文件名	作用
.babelrc	配置 Babel 编译选项，指定代码转译规则。
.editorconfig	定义项目代码格式规范，如缩进风格和空格数量等。
.eslintignore	列出 ESLint 忽略的文件或文件夹。
.eslintrc.js	配置 ESLint 的规则和插件。
.gitignore	列出 Git 忽略的文件或文件夹。
.postcssrc.js	配置 PostCSS 插件和选项。
index.html	网站的主页 HTML 文件，包含页面的结构和内容。
package-lock.json	锁定项目依赖的版本，确保一致的安装。
package.json	定义项目依赖、脚本命令、版本和其他项目配置信息。
README.md	项目说明文件，包含项目简介、安装和使用说明等信息。

2.文件夹结构 

文件夹名	作用
build	存放构建后生成的文件，通常是打包后的产物（如 .js、.css 等）。
config	存放项目的配置文件，通常用于设置构建工具和其他项目参数。
node_modules	存放项目的所有依赖包，由 npm 安装，包含项目运行所需的库和工具。
src	存放源代码文件（.vue .js .css）。
static	存放静态资源文件，如图片、字体、视频等，通常不会被打包处理。

二、导入和导出插件

1.导出插件到txt

# 终端运行：导出扩展插件到指定路径（txt）

code --list-extensions > C:\Users\UserName\Documents\extensions.txt

2.导入插件到VScode

 #  终端运行：导入指定路径（txt）的扩展插件

Get-Content C:\Users\UserName\Documents\extensions.txt | ForEach-Object { code --install-extension $_ }

【注意】导入过程中乱码是正常情况，请耐心等待

3.推荐插件

三、常用快捷键和技巧

1.基本工具栏

 2.大小写转化

选中你需要改变的代码，然后 ctrl + shift +p 呼出菜单，搜索大写/小写 或者 upper/lower 按Enter执行

3.快捷键

1.跳转和复制
F12: 转到实现
Alt + ↑/↓: 向上/向下移动行
Ctrl + Home: 转到文件开头
Ctrl + End: 转到文件末尾
Ctrl + /: 注释/取消注释
Ctrl + G: 转到指定行
Ctrl + D: 复制当前行
 
2.格式
折叠所有代码: Ctrl + K, Ctrl + 0（注意：0是数字键盘的0）
展开所有代码: Ctrl + K, Ctrl + J
格式化代码: Ctrl + K, Ctrl + D

3.全部保存
Ctrl + K, Ctrl + S

四、基本设置配置技巧

1.固定标签页

 五、常见问题及其方案

1.证书过期

npm ERR! code CERT_HAS_EXPIRED

依次执行以下命令： 

npm cache clean --force

npm config set strict-ssl false

2.包更新后版本控制文件（yarn.lock）未更新

方案一：

yarn install

yarn run serve

方案二：（如果方案一不行就用这个）

yarn.lock删掉

重复方案一