sublimetext3和vsCode
1.sublime text3
(1)⽤Package Control安装插件的⽅法
按下Ctrl+Shift+P调出命令⾯板
输⼊install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件
(2)常⽤插件
1. Emmet（原名 Zen Coding）
⼀种快速编写html/css的⽅法
注意：安装Emmet的同时，也会⾃动安装其依赖PyV8 binary库，安装PyV8库会⽤较长时间，可以在Sublime左下⾓看到安装进程状态  2. html5
⽀持hmtl5规范的插件包
注意：与Emmet插件配合使⽤，效果更好
使⽤⽅法：新建html⽂档>输⼊html5>敲击Tab键>⾃动补全html5规范⽂档
3. jQuery
⽀持JQuery规范的插件包
4. javascript-API-Completions
⽀持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提⽰的插件，是少数⽀持sublime text 3的后缀提⽰的插件，HTML5标签提⽰sublime text 3⾃带，不过JQuery提⽰还是很有⽤处的，也可设置要提⽰的语⾔。
5. JSFormat
html5标签区分大小写JS代码格式化插件。
使⽤⽅法：使⽤快捷键ctrl+alt+f
6. SublimeLinter
⼀个⽀持lint语法的插件，可以⾼亮linter认为有错误的代码⾏，也⽀持⾼亮⼀些特别的注释，⽐如“TOD
O”，这样就可以被快速定位。（IntelliJ IDEA的TODO功能很赞，这个插件虽然⽐不上，但是也够⽤了吧）
7. BracketHighlighter
类似于代码匹配，可以匹配括号，引号等符号内的范围。
使⽤⽅法：系统默认为⽩⾊⾼亮，可以使⽤链接所述⽅法进⾏⾃定义配置
8. Alignment
代码对齐，如写⼏个变量，选中这⼏⾏，Ctrl+Alt+A，哇，齐了。
9. Ctags
函数跳转，我的电脑上是Alt+点击函数名称，会跳转到相应的函数
10. Doc B lockr
注释插件，⽣成幽美的注释。标准的注释，包括函数名、参数、返回值等，并以多⾏显⽰，省去⼿动编写。
11. SideBarEnhancements
侧栏右键功能增强，⾮常实⽤
12. AutoFileName
快速帮助你在⽂件中写路径整体来说还不错
13.Keymaps
快速查所有插件的快捷键
(2)快捷键
1.复制⾏或选中项: ctrl+shift+d
2.单⾏剪辑或选中项: ctrl+x
3.粘贴并复制格式: ctrl+shift+v
4.⽤标签包裹⾏或选中项: alt+shift+w
5.移除未闭合的容器元素: ctrl+shift+;
6.⼤写和⼩写: ⼤写ctrl+k+u、⼩写ctrl+k+l
7.删除⼀⾏: ctrl+shift+k
8.整⾏的上下移动: ctrl+shift+↑或 ctrl+shift+↓
9.选择括号内的内容: ctrl+shift+m
10.向上扩展⼀层: ctrl+shift+a
11.选择⽂本的包裹标签: ctrl+shift+` （ESC键下⾯的那个）
12.选择当前⽂件所有匹配项: alt+f3
13.就近选择相同项:ctrl+d
14.折叠代码：Ctrl+Shift+[
15.展开代码：Ctrl+Shift+]
16.折叠属性：Ctrl+KT
17.展开所有：Ctrl+K0
2.Visual Studio Code
（1）插件
前端常⽤：
1.HTML Snippets：超级实⽤且初级的 H5代码⽚段以及提⽰
2.HTMLHint： html代码检测
3.HTML CSS Support : 让 html 标签上写class 智能提⽰当前项⽬所⽀持的样式。新版已经⽀持scss⽂件检索，这个也是必备插件之⼀
4.Auto Close Tag : 匹配标签，关闭对应的标签。很实⽤【HTML/XML】
5.Auto Rename Tag : 修改 html 标签，⾃动帮你完成尾部闭合标签的同步修改
6.Path Autocomplete : 路径智能补全
7.Path Intellisense ：路径智能提⽰
8.JavaScript Snippet Pack：针对js的插件，包含了js的常⽤语法关键字，很实⽤；
9.View InBrowser：从浏览器中查看html⽂件，使⽤系统的当前默认浏览器
10.Class autocomplete for HTML：编写html代码的朋友们对html代码的⼀⼤体现就是重复，如果纯⽤⼿敲不仅累还会影响项⽬进度，这款⾃动补全插件真的很棒；
11.beautify : 格式化代码的⼯具，可以格式化JSON|JS|HTML|CSS|SCSS,⽐内置格式化好⽤
12.Debugger for Chrome：让 vscode 映射 chrome 的 debug功能，静态页⾯都可以⽤ vscode 来打断点调试，真666~
13.jQuery Code Snippets： jquery 重度患者必须品
14.vscode-icon：让 vscode 资源树⽬录加上图标，必备良品！
15. VSCode Great Icons：另⼀款资源树⽬录图标
16. colorize : 会给颜⾊代码增加⼀个当前匹配代码颜⾊的背景，⾮常好
17. Color Info：提供你在 CSS 中使⽤颜⾊的相关信息。你只需在颜⾊上悬停光标，就可以预览⾊块中⾊彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
18. Bracket Pair Colorizer：让括号拥有独⽴的颜⾊，易于区分。可以配合任意主题使⽤。
19. vscode-fileheader：顶部注释模板，可定义作者、时间等信息，并会⾃动更新最后修改时间
20. Document This : js 的注释模板（注意：新版的vscode已经原⽣⽀持，在function上输⼊/** tab）
21. filesize：在底部状态栏显⽰当前⽂件⼤⼩，点击后还可以看到详细创建、修改时间
22. Code Runner : 代码编译运⾏看结果，⽀持众多语⾔
23. GitLens：丰富的git⽇志插件
24. vetur： vue语法⾼亮、智能感知、Emmet等
25. VueHelper： vue代码提⽰
26. Quokka:  是⼀个调试⼯具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使⽤ JSX 或 TypeScript 项⽬中，它能够开箱即⽤。
27. Faker:  使⽤流⾏的 JavaScript 库 – Faker，能够帮你快速的插⼊⽤例数据。Faker 可以随机⽣成姓名、地址、图像、电话号码，或者经典的乱数假⽂段落，并且每个类别还包含了各种⼦类别，你可以根据⾃⾝的需求来使⽤这些数据。
28. CSS Peek:  使⽤此插件，你可以追踪⾄样式表中 CSS 类和 ids 定义的地⽅。当你在 HTML ⽂件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。
29. HTML Boilerplate:  通过使⽤ HTML 模版插件，你就摆脱了为 HTML 新⽂件重新编写头部和正⽂标签的苦恼。你只需在空⽂件中输⼊html，并按 Tab 键，即可⽣成⼲净的⽂档结构。
30.  Prettier:  Prettier 是⽬前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够⾃动应⽤ Prettier，并将整个 JS 和CSS ⽂档快速格式化为统⼀的代码样式。如果你还想使⽤ ESLint，那么还有个 Prettier – Eslint 插件，你可不要错过咯！
31. Color Info:  这个便捷的插件，将为你提供你在 CSS 中使⽤颜⾊的相关信息。你只需在颜⾊上悬停光标，就可以预览⾊块中⾊彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
32. SVG Viewer:  此插件在 Visual Studio 代码中添加了许多实⽤的 SVG 程序，你⽆需离开编辑器，便可以打开 SVG ⽂件并查看它们。同时，它还包含了⽤于转换为 PNG 格式和⽣成数据 URI 模式的选项
33. TODO Highlight:  这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查 TODO 和 FIXME 关键字。当然，你也可以添加⾃定义表达式。
34. Icon Fonts:  这是⼀个能够在项⽬中添加图标字体的插件。该插件⽀持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
35. Change Case:  虽然 VSCode 内置了开箱即⽤的⽂本转换选项，但其只能进⾏⽂本⼤⼩写的转换。⽽此插件则添加了⽤于修改⽂本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。
36. Regex Previewer:  这是⼀个⽤于实时测试正则表达式的实⽤⼯具。它可以将正则表达式模式应⽤在任何打开的⽂件上，并⾼亮所有的匹配项。
37.Easy LESS:  less⽂档提供提⽰，错误警告，以及把less⽂档编译为css⽂件
38. Document This:  ⾃动⽣成 JSDoc 注释，快捷键ctrl+alt+d ctrl+alt+d。或者在function上输⼊/**然后tab键也可以⽣成注释。
39. NPM Instellisense:  NPM 依赖补全，在你引⼊任何 node_modules ⾥⾯的依赖包时提供智能提⽰和⾃动完成，会提⽰已安装的模块名
(3)常⽤快捷键
编辑器与窗⼝管理
1. 打开⼀个新窗⼝： Ctrl+Shift+N
1. 关闭窗⼝： Ctrl+Shift+W
1. 同时打开多个编辑器（查看多个⽂件）
1. 新建⽂件 Ctrl+N
1. ⽂件之间切换 Ctrl+Tab
1. 切出⼀个新的编辑器（最多 3 个） Ctrl+\，也可以按住 Ctrl ⿏标点击 Explorer ⾥的⽂件名
1. 左中右 3 个编辑器的快捷键 Ctrl+1 Ctrl+2 Ctrl+3
1. 3 个编辑器之间循环切换 Ctrl+
1. 编辑器换位置， Ctrl+k然后按 Left或 Right
代码编辑
格式调整
1. 代码⾏缩进 Ctrl+[ 、 Ctrl+]
1. Ctrl+C 、 Ctrl+V 复制或剪切当前⾏/当前选中内容
1. 代码格式化： Shift+Alt+F，或 Ctrl+Shift+P 后输⼊ format code
1. 上下移动⼀⾏： Alt+Up 或 Alt+Down
1. 向上向下复制⼀⾏： Shift+Alt+Up 或 Shift+Alt+Down
1. 在当前⾏下边插⼊⼀⾏ Ctrl+Enter
1. 在当前⾏上⽅插⼊⼀⾏ Ctrl+Shift+Enter
光标相关
1. 移动到⾏⾸： Home
1. 移动到⾏尾： End
1. 移动到⽂件结尾： Ctrl+End
1. 移动到⽂件开头： Ctrl+Home
1. 移动到定义处： F12
1. 定义处缩略图：只看⼀眼⽽不跳转过去 Alt+F12
1. 移动到后半个括号： Ctrl+Shift+]
1. 选择从光标到⾏尾： Shift+End
1. 选择从⾏⾸到光标处： Shift+Home
1. 删除光标右侧的所有字： Ctrl+Delete
1. 扩展/缩⼩选取范围： Shift+Alt+Left 和 Shift+Alt+Right
1. 多⾏编辑(列编辑)：Alt+Shift+⿏标左键，Ctrl+Alt+Down/Up
1. 同时选中所有匹配： Ctrl+Shift+L
1. Ctrl+D 下⼀个匹配的也被选中 (在 sublime 中是删除当前⾏，后⾯⾃定义快键键中，设置与 Ctrl+Shift+K 互换了)
1. 回退上⼀个光标操作： Ctrl+U
重构代码
1. 到所有的引⽤： Shift+F12
1. 同时修改本⽂件中所有匹配的： Ctrl+F12
1. 重命名：⽐如要修改⼀个⽅法名，可以选中后按 F2，输⼊新的名字，回车，会发现所有的⽂件都修改了
1. 跳转到下⼀个 Error 或 Warning：当有多个错误时可以按 F8 逐个跳转
1. 查看 diff：在 explorer ⾥选择⽂件右键 Set file to compare，然后需要对⽐的⽂件上右键选择 Compare with file_name_you_chose 查替换
1. 查 Ctrl+F
1. 查替换 Ctrl+H
1. 整个⽂件夹中查 Ctrl+Shift+F
显⽰相关
1. 全屏：F11
1. zoomIn/zoomOut：Ctrl +/-
1. 侧边栏显/隐：Ctrl+B
1. 显⽰资源管理器 Ctrl+Shift+E
1. 显⽰搜索 Ctrl+Shift+F
1. 显⽰ Git Ctrl+Shift+G
1. 显⽰ Debug Ctrl+Shift+D
1. 显⽰ Output Ctrl+Shift+U
(4)⽤户设置（保存格式化）
{
"files.associations": {
"*.wxml": "xml",
"*.wxss": "css"
},
"editor.fontSize":18,
"editor.formatOnType": false,
"editor.formatOnSave": false,
"git.path": "E:/wprogram/Git/",
"dererType": "dom",
"emmet.includeLanguages": {"vue": "html"},
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"ssages": {
"suppressShowKeyBindingsNotice": true
},
"able": false,
"vetur.format.defaultFormatter.html": "js-beautify-html",    "plate": false
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。