工作笔记

SublimeText使用合集

2019-05-14
阅读次数:

“Sublime Text 是一个跨平台的HTML和文本编辑器,也是先进的代码编辑器,同时支持Windows、Linux、Mac OS X等操作系统。Sublime Text具有漂亮的用户界面和强大的功能,通过各种插件可以将Sublime Text打造成各种IDE,本文将收集各种Sublime Text的插件。”

1. 安装package control

https://packagecontrol.io/installation

下载地址: https://packagecontrol.io/Package%20Control.sublime-package

添加channel文件: http://static.bolin.site/channel_v3.json

2. 常用插件

2.1 通用插件

SideBarEnhancements插件

  • 使用截图:

AutoFileName

Terminus插件

  • 快捷键:
[
  {
    "keys": ["ctrl*shift*t"], 
    "command": "toggle_terminus_panel"
  }
]
  • 使用截图:

TrailingSpaces插件

BracketHighlighter

2.2 HTML插件

Emmet

Tag插件

SublimeCodeIntel插件

LiveReload插件

HTML-CSS-JS Prettify插件

2.3 JS插件

JsFormat插件

Alignment

Babel

使用时需要将所有js后缀文件设置语法为Babel
  • 使用截图:

DocBlockr

  • 使用截图:

HyperClick

  • 使用截图:

jsfmt

  • 设置:
{
  // autoformat on save
  "autoformat": false,

  // array of extensions for autoformat
  "extensions": ["js", "jsx", "sublime-settings", "sublime-keymap"],

  // options for jsfmt
  "options": {
    "preset": "jquery",
    "indent": {
      "value": "    "
    },
    // plugins included
    "plugins": [
      "esformatter-jsx",
    // "esformatter-quotes",
    // "esformatter-semicolons",
    // "esformatter-braces",
    // "esformatter-dot-notation"
    ],
    // plugins included
    "jsx": {
      "formatJSX": true, //Duh! that's the default
      "attrsOnSameLineAsTag": false, // move each attribute to its own line
      "maxAttrsOnTag": 3, // if lower or equal than 3 attributes, they will be kept on a single line
      "firstAttributeOnSameLine": true, // keep the first attribute in the same line as the tag
      "formatJSXExpressions": true, // default true, if false jsxExpressions won't be recursively formatted
      "JSXExpressionsSingleLine": true, // default true, if false the JSXExpressions might span several lines
      "alignWithFirstAttribute": false, // do not align attributes with the first tag
      "spaceInJSXExpressionContainers": " ", // default to one space. Make it empty if you don't like spaces between JSXExpressionContainers
      "removeSpaceBeforeClosingJSX": false, // default false. if true <React.Something /> => <React.Something/>
      "closingTagOnNewLine": false, // default false. if true attributes on multiple lines will close the tag on a new line
      "JSXAttributeQuotes": "", // possible values "single" or "double". Leave it as empty string if you don't want to modify the attributes' quotes
      "htmlOptions": {
        "brace_style": "collapse",
        "indent_size": 4,
        "indent_char": " ",
        "indent_with_tabs": false,
        "max_preserve_newlines": 2,
        "preserve_newlines": true
      // put here the options for js-beautify.html
      }
    }
  },
  "options-JSON": {
    "plugins": [
      "esformatter-quotes"
    ],
    "quotes": {
      "type": "double"
    }
  },
  "alert-errors": true,
  // path to nodejs
  "node-path": "node",
  // if true it will format the whole file even if you have a selection active
  "ignore-selection": false
}
  • 快捷键
  {
    "keys": [
      "ctrl*q"
    ],
    "command": "format_javascript"
  }
  • 使用截图:

2.4 CSS插件

ColorHighlight

  • 使用截图:

CssComb插件

Autoprefixer插件

2.2 Markdown插件

MarkdownEditting

  • 使用截图:

MarkdownPreview

  • 设置:
{
    "browser": "/Applications/Google Chrome.app",
    "enable_autoreload": true
}
  • 快捷键:
[
    {
        "keys": ["alt*m"], 
        "command": "markdown_preview", 
        "args": {"target": "browser", "parser":"markdown"}
    }
]
  • 使用截图:

参考链接


上一篇 Atom插件合集

评论

目录