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
}

 

转载于:https://www.cnblogs.com/wang-xu/p/10566493.html

你可能感兴趣的:(sublime text3 和 vsCode)