VSCode

yuhuo2022-03-28开发工具

一. 快捷键

快捷键	作用
ctrl + w	关闭当前标签
ctrl + e	搜索文件
ctrl + r	打开最近文件
ctrl + y	恢复
ctrl + a	全选
ctrl + s	保存
ctrl + d	删除行
ctrl + f	搜索关键词
ctrl + g	跳转指定行
ctrl + h	替换关键词
ctrl + j	打开关闭底部面板
ctrl + u	将选中的代码转大写
ctrl + l	追加打印代码
ctrl + z	撤销
ctrl + x	剪切选中或当前行
ctrl + c	复制选中或当前行
ctrl + v	粘贴
ctrl + c + v	复制追加一行
ctrl + [click]	跳转到变量声明处
ctrl + /	单行注释
ctrl + shift + /	多行注释
ctrl + enter	追加空行
alt + [click]	增加光标
alt + shift + [click]	增加多行选中

二. Emmet

高频语法

!    	html5模板 
(E代表HTML标签)
E		标签
E>N    	标签 + 子标签
E#id   	标签 + id
E.c1   	标签 + class
E*n    	乘法,生成n项
E#id.c1.c2*n>E  多个连续

script:src   script简写   
table>.a>.b  隐式标签

lorem	随机文本
loremN  N个单词的随机文本
E>lorem 在标签中的随机文本

低频语法

E+N    标签 + 同级标签
E^N    标签 + 上层标签
E[attr1=foo attr2=foo]  标签 + 多属性
E{foo} 标签+内容
E.cla$*n  $自动计数

三. 插件

显示类

Chinese (Simplified) Language Pack for Visual Studio Code：简体中文包
Better Comments：注释颜色分类
Bracket Pair Colorizer：括号对齐颜色
vscode-icons：资源管理器图标

提示类

HTML CSS Support：class 类提示
Class autocomplete for HTML：class 类名提示
JavaScript (ES6) code snippets：ES6语法提示
ESLint：js 语法纠错
vetur：vue 文件的语法高亮，错误检测，格式化vue文件
1. 打开：设置-拓展-Veture
2. 设置：Tab Width 为 4，即缩进以4个空格
3. 不勾选 Use Tabs，因为使用了制表符缩进，Tab Width 设置就会失效
Prettier - Code formatter：格式化代码
1. 设置 - 拓展 - Prettier
2. 设置 Tab Size 为 4
3. 如果项目由 .editorconfig 文件，设置 indent_size = 4
es6-string-html：es6 字符串语法高亮，如在字符串前加 /*html*/，则按 html 代码高亮

代码类

Auto Rename Tag：自动修改标签
javascript console utils：快捷生成打印代码
Sort Js Object keys：排序对象的属性
1. 选中属性相关代码
2. 打开命令面板，输入 sort,选择 "Sort Js object keys"

运行类

open in browser：在浏览器中以本地文件打开
Live Server：在浏览器中以服务器打开
Code Runner：运行选中代码
1. 打开：设置 - 拓展 - Run Code
2. 设置：Configuration-Default-Language，为 javascript
3. 选中 js 代码,右键选中 "Run Code"
Markdown Preview Enhanced：预览markdown,右键生成
Debugger for Chrome：谷歌浏览器调试

四. 配置

1. 修改 powershell 执行策略

# 在powershell中执行 
set-executionpolicy remotesigned

2. 关闭 EsLint

打开设置 - 扩展 - ESLint
将 EsLint-enable 设为 false

3. 修改 live server 配置

打开设置 - 扩展 - Live Server Config，打开 settings.json

// 修改端口
"liveServer.settings.port": 5500,

// 将根目录设为项目的上级,即工作空间(默认是项目) 
"liveServer.settings.root": "../",

4.关闭搜索跟踪（非常耗内存）

打开设置 - 功能 - 搜索
将 Follow Symlinks 设为 false

5. 关闭Git

打开设置 - 扩展 - git
将 AutoreFresh 设为 false
将 Auto Respository Detection 设为 false
将 Enabled 设为 false

五. settings.json

{
    // 控制字体大小(像素)
    "editor.fontSize": 18,
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "",
    "liveServer.settings.port": 5500,
    "liveServer.settings.root": "../",
    "git.ignoreMissingGitWarning": true,
    "workbench.iconTheme": "vscode-icons",
    "explorer.confirmDelete": false,
    // 针对某种语言，配置替代编辑器设置
    "[json]": {
        // 定义一个默认格式化程序，统一使用 prettier
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[wxml]": {
        // wxml 只能配置使用 minapp 格式化
        // 需要再配置 "minapp-vscode.wxmlFormatter": "prettier"
        "editor.defaultFormatter": "qiu8310.minapp-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[handlebars]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "git.autorefresh": false,
    "git.autoRepositoryDetection": false,
    "git.enabled": false,
    "search.followSymlinks": false,
    "scm.autoReveal": false,
    "explorer.autoReveal": false,
    "liveServer.settings.donotShowInfoMsg": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "eslint.codeAction.disableRuleComment": {
        "enable": false
    },
    "vsicons.dontShowNewVersionMessage": true,
    "explorer.confirmDragAndDrop": false,
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "files.eol": "\n",
    "workbench.statusBar.visible": false,
    "editor.unicodeHighlight.ambiguousCharacters": false,
    "redhat.telemetry.enabled": true,
    "vetur.validation.template": false,
    "volar.autoCompleteRefs": true,
    "bracketPairColorizer.depreciation-notice": false,
    "window.zoomLevel": 1,
    "security.workspace.trust.untrustedFiles": "open",
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "workbench.startupEditor": "none",
    "volar.vueserver.json.customBlockSchemaUrls": {},
    "git.path": "D:/Git/bin/git.exe",
    "volar.inlayHints.eventArgumentInInlineHandlers": false,
    // 要求 Prettier 配置方案文件（如 .prettierrc）必须存在，否则不格式化
    "prettier.requireConfig": false,
    // 使用 .editorconfig 中的配置方案
    "prettier.useEditorConfig": false,
    // 指定每行代码的最佳长度，如果超出该长度则格式化
    "prettier.printWidth": 120,
    // 使用空格缩进时的缩进长度（使用 Tab 缩进时该项无效）
    "prettier.tabWidth": 4,
    // 使用 Tab 缩进，而不是空格缩进（缩进长度固定为4）
    "prettier.useTabs": false,
    "editor.codeActionsOnSave": {},
    "minapp-vscode.disableAutoConfig": true,
    "minapp-vscode.decorateType": {
        "color": "#ba68c8"
    },
    // wxml 格式化工具
    "minapp-vscode.wxmlFormatter": "prettier",
    // minapp 的 prettier 配置
    "minapp-vscode.prettier": {
        "parser": "html",
        "useTabs": false,
        "tabWidth": 4,
        "printWidth": 100,
        "singleQuote": false
    },
}

VSCode

# 一. 快捷键

# 二. Emmet

# 三. 插件

# 四. 配置

# 五. settings.json

#

ON THIS PAGE

一. 快捷键

二. Emmet

三. 插件

四. 配置

五. settings.json