vscode快捷使用教程：Vscode高效开发技巧

vscode快捷使用教程：Vscode高效开发技巧目的：通过项目文件在工作区（workspace）进行统一配置;Option Shift F （win Alt Shift F） 2.5 上下平移行内容Option 上下方向键 移动光标行代码 （win Alt 上下方向键） 2.7 移动光标移动到行首 command 左方向键 （win Home） 移动到行尾 command 右方向键 （win End） 移动到文档的开头 command 上方向键 （win Ctrl Home） 移动到文档的末尾 command 下方向键 （win Ctrl End） 回到光标上次的位置 command U 2.8 区块折叠与展开Ctrl Shift [ 折叠区块 Ctrl Shift ] 展开区块 3. 项目中Vscode统一配置文件Ctrl Shift P 查看所有快捷键 2.1 打开Ctrl

Vscode IDE

1. 下载安装vscode

vscode官网下载，下载安装即可。

2. 代码编辑技巧

• 2.0 Help---命令帮助

Ctrl Shift P 查看所有快捷键

• 2.1 打开

Ctrl Shift N 新建窗口 Ctrl Shift W 关闭窗口

• 2.2 打开Terminal

Ctrl ` 打开终端或点击左下角三角和❌号位置

• 2.3 注释

Command / （win Ctrl /）

-2.4 行复制与粘贴

Ctrl C 复制行 Ctrl X 剪切行

• 2.5 查找与替换

Ctrl F 查找 Ctrl H 替换 Alt Enter 选择查找所匹配的所有内容 Ctrl P 查找文件名并快速打开 Ctrl G 查找行 提示：见下图 1) 匹配大小写，2) 匹配整个单词 1) 替换当前，2) 替换全部

查找

替换

• 2.6 格式化代码

Option Shift F （win Alt Shift F）

• 2.5 上下平移行内容

Option 上下方向键 移动光标行代码 （win Alt 上下方向键）

• 2.7 移动光标

移动到行首 command 左方向键 （win Home） 移动到行尾 command 右方向键 （win End） 移动到文档的开头 command 上方向键 （win Ctrl Home） 移动到文档的末尾 command 下方向键 （win Ctrl End） 回到光标上次的位置 command U

• 2.8 区块折叠与展开

Ctrl Shift [ 折叠区块 Ctrl Shift ] 展开区块

3. 项目中Vscode统一配置文件

目的：通过项目文件在工作区（workspace）进行统一配置;

.vscode 在根目录下创建该文件夹;

settings.json 在文件夹下创建该配置文件.

// settings.json { // tab 大小为2个空格 "editor.tabSize": 2 // 编辑器换行 "editor.wordWrap": "off" // 保存时格式化 "editor.formatOnSave": true // 开启 vscode 文件路径导航 "breadcrumbs.enabled": true // prettier 设置语句末尾不加分号 "prettier.semi": false // prettier 设置强制单引号 "prettier.singleQuote": true // 选择 vue 文件中 template 的格式化工具 "vetur.format.defaultFormatter.html": "js-beautify-html" // vetur 的自定义设置 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "aligned-multiple" } "prettier": { "singleQuote": true "semi": false "printWidth": 100 "wrapAttributes": false "sortAttributes": false } } }

4. 必备插件

Auto Close Tag Auto Rename Tag Bracket Pair Colorizer Color Highlight HTML Snippets HTML CSS Support HTMLHint file-icons JavaScript (ES6) code snippets Material Icon Theme GitLens eslint vueur Vue 2 Snippets Vue Peek VueHelper Node modules resolve Open inBrowser —— 在浏览器打开 Code Runner —— 右键运行js代码 或 使用node a.js Import Cost —— 分析引入库的大小，如jQuery Project Manager —— 项目管理，左侧增加一个文件管理菜单 code ./vscode Command Shift P 或 F1 ( win Ctrl Shift P ) 选择Project Manager: Save Project vscode-icons —— 标识文件类型图标 Chinese —— 汉化vscode，重启一下 Better Solarized Dark —— 主题，绿色 gitignore —— 忽略文件

右键gitignore

5. Eslint检测，待补充！！！

npm i -g eslint eslint --init 一系列配置 一系列配置 自动修复等。。。