Vscode高效开发技巧VscodeIDE1.下载安装vscodevscode官网下载,下载安装即可2.代码编辑技巧2.0Help---命令帮助CtrlShiftP查看所有快捷键2.1打开CtrlShiftN新建窗口Ctrl。

Vscode IDE
1. 下载安装vscode
vscode官网下载,下载安装即可。
2. 代码编辑技巧
- 2.0 Help---命令帮助
CtrlShiftP 查看所有快捷键
- 2.1 打开
CtrlShiftN 新建窗口CtrlShiftW 关闭窗口
- 2.2 打开Terminal
Ctrl ` 打开终端或点击左下角三角和❌号位置
- 2.3 注释
Command/ (win Ctrl/)
-2.4 行复制与粘贴
Ctrl C 复制行Ctrl X 剪切行
- 2.5 查找与替换
CtrlF 查找CtrlH 替换AltEnter 选择查找所匹配的所有内容CtrlP 查找文件名并快速打开CtrlG 查找行提示:见下图1) 匹配大小写,2) 匹配整个单词1) 替换当前,2) 替换全部
查找
替换
- 2.6 格式化代码
OptionShiftF (win AltShiftF)
- 2.5 上下平移行内容
Option上下方向键 移动光标行代码 (win Alt上下方向键)
- 2.7 移动光标
移动到行首 command左方向键 (win Home)移动到行尾 command右方向键 (win End)移动到文档的开头 command上方向键 (win CtrlHome)移动到文档的末尾 command下方向键 (win CtrlEnd)回到光标上次的位置 commandU
- 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 TagAuto Rename TagBracket Pair ColorizerColor HighlightHTML SnippetsHTML CSS SupportHTMLHintfile-iconsJavaScript (ES6) code snippetsMaterial Icon ThemeGitLens eslintvueurVue 2 SnippetsVue PeekVueHelperNode modules resolveOpen inBrowser —— 在浏览器打开Code Runner —— 右键运行js代码 或 使用node a.jsImport Cost —— 分析引入库的大小,如jQueryProject Manager —— 项目管理,左侧增加一个文件管理菜单 code ./vscodeCommandShiftP 或 F1 ( win CtrlShiftP ) 选择Project Manager: Save Projectvscode-icons —— 标识文件类型图标Chinese —— 汉化vscode,重启一下Better Solarized Dark —— 主题,绿色gitignore —— 忽略文件
右键gitignore
5. Eslint检测,待补充!!!
npm i -g eslinteslint --init 一系列配置一系列配置自动修复等。。。
,
