sublime text3 和 vsCode

时间  2019-11-09
标签 sublime text3 text vscode 栏目 HTML 繁體版
原文   原文链接

1.sublime text3javascript

(1)用Package Control安装插件的方法css

按下Ctrl+Shift+P调出命令面板 

输入install 调出 Install Package 选项并回车，而后在列表中选中要安装的插件

 

(2)经常使用插件html

  1. Emmet（原名 Zen Coding）前端

      一种快速编写html/css的方法vue

     注意：安装Emmet的同时，也会自动安装其依赖PyV8 binary库，安装PyV8库会用较长时间，能够在Sublime左下角看到安装进程状态html5

  2. html5java

    支持hmtl5规范的插件包node

    注意：与Emmet插件配合使用，效果更好react

    使用方法：新建html文档>输入html5>敲击Tab键>自动补全html5规范文档jquery

  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
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程