vscode基础代码教程（Vscode高效开发技巧）

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 一系列配置 一系列配置 自动修复等。。。

,