vscode 使用教程

最近电脑有点问题，重装了系统，然后..你懂的，所有应用要重装，那个糟心哦，这里就记录下vscode刚安装时要安装的插件和配置，顺便给新手们引个路

安装

官网： https://code.visualstudio.com/

目录结构说明

1. 文件资源管理器 (ctrl+shift+E)
2. 全局搜索
   windows: ctrl+f 文件内搜索，ctrl+shift+f 全局搜索
   mac: command+f 文件内搜索，command+shift+f 全局搜索
3. git 管理
4. debug 调试
5. 插件管理

常用快捷

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

代码片段

1. command + shift + p
2. 输入 snippets,选择 Preferences: Configure User Snippets
3. 选择新建 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"
  }
}

更多片段可参考：https://www.jianshu.com/p/bec1e0f04171

常用插件推荐

1. 高亮类

• vscode-icons: 将文件目录变成视图文件树，让左边的文件树有对应图标区分
• Bracket Pair Colorizer: 将括号以颜色区分，便于区分代码块
• vetur： 高亮 vue 语法, vue 必备（vue3可以换成使用volar替代vetur）
• DotEnv：高亮.env文件
• color highlight: 自动高亮所写的颜色，比如：#FFFFFF,会自动增加白色背景色
• Trailing Spaces: 高亮句尾后的空格

2. 格式化

• eslint
• Prettier: 严格化代码

3. 功能类

• 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)

关于插件使用的一些坑

1. 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",
    }
}

2. 设置tab size为2，但是不生效
   点击下图的“Editor: Detect Indentation”，进去后，将detect Indentation的勾选取消掉，这个选项会检测你文件之前的默认tab格数，然后自动给你设置成一样的
   

   vscode-settings
   
   

3. 之前不知道点到哪了，左侧的菜单栏资源树不见了
   

   vscode.png
   
   解决：使用快捷ctrl + shift + E就可以显示出来了

4. 使用nodemon启动脚本失败
   nodemon : 无法加载文件 C:\Users\Doubl\AppData\Roaming\npm\nodemon.ps1，因为在此系统上禁止运行脚 本。
   这是因为你电脑禁止运行脚本，解决办法：
   管理员身份打开powerShell，输入set-ExecutionPolicy RemoteSigned
   
   image.png