最近电脑有点问题，重装了系统，然后..你懂的，所有应用要重装，那个糟心哦，这里就记录下vscode刚安装时要安装的插件和配置，顺便给新手们引个路
安装
官网： https://code.visualstudio.com/
目录结构说明
- 文件资源管理器 (ctrl+shift+E)
- 全局搜索
windows: ctrl+f 文件内搜索，ctrl+shift+f 全局搜索
mac: command+f 文件内搜索，command+shift+f 全局搜索 - git 管理
- debug 调试
- 插件管理
常用快捷
mac电脑是cmd，windows是ctrl
- ctrl + ~： 打开和关闭终端
- cmd+shift+P(win: ctrl+shift+P): 打开终端命令行
- cmd+shift+f: 全局搜索, cmd+f: 文件内搜索
- cmd+n: 新建文件
- cmd+o: 打开文件，慎用
- cmd+p: 打开并跳转到的某个文件
- cmd+/: 注释
- ctrl+d: 将选定的字符移动到下一个匹配字符串上，在批量修改用时很香
基本配制项
通过settings.json文件配置，基本上，所有的vscode的配置，都可以在这里设置的
code---preference---settings---User settings:
image.png
{
// 设置字体大小
"editor.fontSize": 14,
// 将tab缩进改为2
"editor.tabSize": 2,
// git的路径（windows）
"git.path": "D:\\Git\\bin"
}
UI操作界面去配置
- vscode 双击选择-连接词
file-preference-settings中，搜索wordSeparators，将分隔词-去掉即可
image.png
主题
code---preference---Color Theme
代码片段
command + shift + p- 输入
snippets,选择Preferences: Configure User Snippets - 选择新建
New Global Snippets file，自定义命名文件
// ct.code-snippets
// 代码片段的名称
"Comment": {
// 影响范围,不写的话默认全局通用
"scope": "javascript,typescript",
// 快捷字段
"prefix": "ct",
// 快捷字段对应的代码片段
"body": ["/*", "*", "*/"],
// 描述
"description": "add commnet"
}
常用的 vue 代码片段：
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" props: {\n",
" },",
" data() {",
" return {\n",
" };",
" },",
" computed: {\n",
" },",
" created() {\n",
" },",
" mounted() {\n",
" },",
" watch: {\n",
" },",
" methods: {\n",
" },",
" components: {\n",
" },",
"};",
"</script>\n",
"<style scoped lang=\"${1:scss}\">\n",
"</style>\n"
],
"description": "Create vue template"
}
}
更多片段可参考：//www.greatytc.com/p/bec1e0f04171
常用插件推荐
- 高亮类
-
vscode-icons: 将文件目录变成视图文件树，让左边的文件树有对应图标区分 -
Bracket Pair Colorizer: 将括号以颜色区分，便于区分代码块 -
vetur： 高亮 vue 语法, vue 必备（vue3可以换成使用volar替代vetur） -
DotEnv：高亮.env文件 -
color highlight: 自动高亮所写的颜色，比如：#FFFFFF,会自动增加白色背景色 -
Trailing Spaces: 高亮句尾后的空格
- 格式化
eslint-
Prettier: 严格化代码
- 功能类
-
css peek: 可以根据样式类名跳转到定义的地方 -
auto close tag: 自动补齐html的关闭标签 -
auto rename tag: 自动重命名标签对 -
code runner: 可以直接运行js等文件 -
Live Server：快速启一个本地服务器 -
image preview: 悬停图片链接时，预览图片 -
Auto Import - ES6, TS, JSX, TSX：自动导入文件，比如使用另一个方法或变量，会自动生成import语句 -
document this: 安插这个插件后，写方法时，可以自动添加注释，比如写个function test(a, b)，在方法上方写/***/就会自动生成方法注释 -
vscode-fileheader、koroFileHeader：生成文件备注，谁改都知道 -
npm Intellisense：npm模块提示，不记得怎么写的模块名，会有提示 -
Wrap Console Log Lite：点击某变量，直接生成console.log("varName", var)
关于插件使用的一些坑
-
coderunner运行js- 不识别中文路径
- node : 无法将“node”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。（这个要先排除node有没有安装好的问题，在终端运行node -v，有版本号就是全局安装是ok的）
// settings.json
{
// 中文路径加这句
"code-runner.runInTerminal": true,
"code-runner.executorMap": {
// 不识别node，加这句，这是windows的写法
"javascript": "D:\\nodejs\\node.exe",
}
}
-
设置
tab size为2，但是不生效
点击下图的“Editor: Detect Indentation”，进去后，将detect Indentation的勾选取消掉，这个选项会检测你文件之前的默认tab格数，然后自动给你设置成一样的
vscode-settings
-
之前不知道点到哪了，左侧的菜单栏资源树不见了
vscode.png
解决：使用快捷ctrl + shift + E就可以显示出来了
- 使用
nodemon启动脚本失败
nodemon : 无法加载文件 C:\Users\Doubl\AppData\Roaming\npm\nodemon.ps1，因为在此系统上禁止运行脚 本。
这是因为你电脑禁止运行脚本，解决办法：
管理员身份打开powerShell，输入set-ExecutionPolicy RemoteSigned
image.png
