sublime text3 和 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提示还是很有用处的，也可设置要提示的语言。

    安装方法（请阅读链接详情）：http://www.ithao123.cn/content-10545789.html

 5. JSFormat

    JS代码格式化插件。

    使用方法：使用快捷键ctrl+alt+f

 6. SublimeLinter

     一个支持lint语法的插件，可以高亮linter认为有错误的代码行，也支持高亮一些特别的注释，比如“TODO”，这样就可以被快速定位。（IntelliJ IDEA的TODO功能很赞，这个插件虽然比不上，但是也够用了吧）

 7. BracketHighlighter

     类似于代码匹配，可以匹配括号，引号等符号内的范围。

     使用方法：系统默认为白色高亮，可以使用链接所述方法进行自定义配置

     http://www.360doc.com/content/14/1111/15/15077656_424301780.shtml

 8. Alignment

     代码对齐，如写几个变量，选中这几行，Ctrl+Alt+A，哇，齐了。

 9. Ctags

     函数跳转，我的电脑上是Alt+点击 函数名称，会跳转到相应的函数

10. Doc​Blockr

     注释插件，生成幽美的注释。标准的注释，包括函数名、参数、返回值等，并以多行显示，省去手动编写。

     使用方法见：http://www.cnblogs.com/huangtailang/p/4499988.html

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/cmd/git.exe",
    "terminal.integrated.rendererType": "dom",
    "emmet.includeLanguages": {"vue": "html"},
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue",
          "autoFix": true
        }
    ],
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },
    "javascript.format.enable": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.validation.template": false
}