VSCode快速上手使用 - 一棵菜菜的博客

说明

描述：最近开始从webstorm转到vscode开发工具。将今天的快速上手写个小结，有些是在网上查阅的资料。汇聚于此吧。

配置参考：《如何从webstorm转vscode》中AvinC的回答

具体内容

三. 设置

在 IDE 左下角的齿轮菜单中“设置”按钮进入设置页面。设置页面很友好，鼠标放在需要修改的设置代码上面，在左边会出现一个铅笔的符号，点击可以快速拷贝修改设置。

{
   "workbench.colorTheme": "Solarized Light",
   "workbench.startupEditor": "newUntitledFile",
   "workbench.iconTheme": "material-icon-theme",
   "cSpell.language": "en,en-US",
   "window.zoomLevel": 0,
   "files.autoSave": "off",
   "editor.fontSize": 16,
   "editor.tabSize": 2,
   "editor.scrollBeyondLastLine": false,
   "editor.minimap.enabled": false,
   "explorer.openEditors.visible": 0,
   "terminal.external.osxExec": "iTerm.app"，
   "files.associations": {
       "*.wxss": "css",
       "*.wxml": "html"
   }
}

13.支持小程序开发的文件格式

常用快捷键

Ctrl+`:快速调出终端，也可以查看——>集成终端调出。

四. 修改为我常用的快捷键

转到定义改为command+b
replace改为command+r
find 改为 command+f
close editor: command + w

五. 我的vscode'用户设置'文件配置项

我的常用配置：

{
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.fontSize": 16,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 2000,
    "editor.wordWrap": "on", // 代码超出一行时自动换行
    "eslint.autoFixOnSave": true, // 保存时自动根据eslint规范来检测修复js代码（要先装"ESLint"插件）
    "workbench.colorTheme": "Tomorrow Night Blue", // file>perfences>color theme
    "editor.minimap.enabled": false,// 关闭代码缩略图
    "editor.formatOnSave": true // 
}

eslint.autoFixOnSave：

其他参考：

{
    "files.associations": {
        "*.wxss": "css",
        "*.wxml": "wxml",
        "*.cjson": "jsonc",
        "*.wxs": "javascript"
    },
    "editor.minimap.enabled": false,
    "editor.scrollBeyondLastLine": false,
    
    "window.nativeTabs": true,
    "window.zoomLevel": 0,
    
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },
    "diffEditor.ignoreTrimWhitespace": true,
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "breadcrumbs.enabled": true,
    "[html]": {
        
    },
    "minapp-vscode.disableDecorate": true
}

我的插件

view in browser 用浏览器预览运行html文件。安装好后，右键点击html文件，会出现view in browser 选项。

我的插件.png

eslint，stylelint
Office Viewer(Markdown Editor):VS code所见即所得的Markdown编辑器
i18n Ally：多语言
Prettier - Code formatter

使用

vscode新建html，没有模板?

在文件夹下右击--新建--index.html，输入！,按tab键，就会自动添加好html元素了。

vscode 快捷键

{ ：
  "key": "shift+cmd+k",
  "command": “删除行”,
  }

{
  "key": "alt+up",
  "command": “向上移动行”,
 }

{
  "key": "alt+cmd+上下键”,
  "command": “选中行”,
 }

{
  "key": "shift+cmd+enter",
  "command": “在上面插入行”,
}
{
  "key": "cmd+enter",
  "command": “在下面插入行”,
}
{
  "key": "shift+cmd+h",
  "command": “在”
}

说明