摘要：今天主要介紹與兩個插件插件使用來格式化與代碼。可以在這里嘗試的效果原始代碼格式化后的代碼有了這個，個人認為在前端開發中，可以不用和這兩個插件。的代碼對齊也有，實際上也用的是。其目標是成為一種適合書寫的網絡語言。

今天主要介紹HTML-CSSS-JS Prettify與Markdown Preview兩個插件

HTML-CSSS-JS Prettify插件使用js-beautify來格式化js、html與css代碼。
可以在這里嘗試js-beautify的效果
原始代碼：

// This is just a sample script. Paste your real code (javascript or HTML) here.

if ("this_is"==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

格式化后的代碼：

// This is just a sample script. Paste your real code (javascript or HTML) here.
if ("this_is" == /an_example/) {
    of_beautifier();
} else {
    var a = b ? (c % d) : e[f];
}

有了這個，個人認為在前端開發中，可以不用Alignment和JsFormat這兩個插件。
Alignment的代碼對齊HTML-CSS-JS Prettify也有，JsFormat實際上也用的是js-beautify。
如果只是針對html、css與js代碼，HTML-CSS-JS Prettify就夠了

HTML-CSSS-JS Prettify插件使用的是node版的js-beautify，因此需要首先安裝node，node的安裝請自行搜索。
在node安裝完成后，使用npm安裝js-beautify，命令 npm install -g js-beautify
HTML-CSS-JS Prettify的安裝推薦使用PackageControl
Ctrl+Shift+P輸入Install Package，然后輸入HTML-CSS-JS Prettify進行安裝

HTML-CSS-JS Prettify配置可使用.jsbeautifyrc文件，js-beautify會在被優化代碼文件的當前目錄查找，如果找不到會向上級目錄查找。
因此，可以在項目的根目錄新建.jsbeautifyrc文件來配置js-beautify
貼一下我的配置，是從這里扣下來的,改的比較少

{
  // Details: https://github.com/victorporof/Sublime-HTMLPrettify#using-your-own-jsbeautifyrc-options
  // Documentation: https://github.com/einars/js-beautify/
  "html": {
    "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg","aspx","jsp"],
    "brace_style": "collapse", // [collapse|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line, or attempt to keep them where they are
    "end_with_newline": false, // End output with newline
    "indent_char": " ", // Indentation character
    "indent_handlebars": false, // e.g. {{#foo}}, {{/foo}}
    "indent_inner_html": false, // Indent  and  sections
    "indent_scripts": "keep", // [keep|separate|normal]
    "indent_size": 2, // Indentation size
    "max_preserve_newlines": 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
    "preserve_newlines": true, // Whether existing line breaks before elements should be preserved (only works before elements, not inside tags or for text)
    "unformatted": ["a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"], // List of tags that should not be reformatted
    "wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
  },
  "css": {
    "allowed_file_extensions": ["css", "scss", "sass", "less"],
    "end_with_newline": false, // End output with newline
    "indent_char": " ", // Indentation character
    "indent_size": 2, // Indentation size
    "newline_between_rules": true, // Add a new line after every css rule
    "selector_separator": " ",
    "selector_separator_newline": false // Separate selectors with newline or not (e.g. "a,
br" or "a, br")
  },
  "js": {
    "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc", "csslintrc"],
    "brace_style": "collapse", // [collapse|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line, or attempt to keep them where they are
    "break_chained_methods": false, // Break chained method calls across subsequent lines
    "e4x": false, // Pass E4X xml literals through untouched
    "end_with_newline": false, // End output with newline
    "indent_char": " ", // Indentation character
    "indent_level": 0, // Initial indentation level
    "indent_size": 2, // Indentation size
    "indent_with_tabs": false, // Indent with tabs, overrides `indent_size` and `indent_char`
    "jslint_happy": false, // If true, then jslint-stricter mode is enforced
    "keep_array_indentation": false, // Preserve array indentation
    "keep_function_indentation": false, // Preserve function indentation
    "max_preserve_newlines": 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
    "preserve_newlines": true, // Whether existing line breaks should be preserved
    "space_after_anon_function": false, // Should the space before an anonymous function"s parens be added, "function()" vs "function ()"
    "space_before_conditional": true, // Should the space before conditional statement be added, "if(true)" vs "if (true)"
    "space_in_empty_paren": false, // Add padding spaces within empty paren, "f()" vs "f( )"
    "space_in_paren": false, // Add padding spaces within paren, ie. f( a, b )
    "unescape_strings": false, // Should printable characters in strings encoded in xNN notation be unescaped, "example" vs "x65x78x61x6dx70x6cx65"
    "wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
  }
}

主要的改動就是

修改了"html"的"allowed_file_extensions"，增加了aspx和jsp的支持

修改了"css"的"selector_separator_newline"，個人覺得沒必要每個選擇器都要占一行

修改了"js"的"allowed_file_extensions"，增加了.csslintrc文件的支持

修改了"html"、"css"、"js"的"indent_size"，我的代碼縮進為2個空格

使用Ctrl+Shift+H，優化當前代碼文件。
使用js文件測試一下，優化前

優化后

js-beautify對css的格式化，有個問題是，會在注釋下面插入一行空白字符
如下圖，優化前

優化后

sublime text 3 插件：HTML-CSS-JS Prettify文中給出了解決方法，大家可以參考

Markdown的語法全由一些經過精挑細選的符號所組成。其目標是成為一種適合 書寫的網絡語言。
Markdown 是一種方便記憶、書寫的純文本標記語言，用戶可以使用這些標記符號以最小的輸入代價生成極富表現力的文檔。
比如這篇博客就是用Markdown語法寫的。
關于Markdown語法，可參考中文文檔

Markdown Preview的安裝推薦使用PackageControl
Ctrl+Shift+P輸入Install Package，然后輸入Markdown Preview進行安裝

可使用SublimeText3創建.md文件，按照Markdown語法輸入要寫的內容，如下圖

然后Ctrl+Shift+P輸入mp，選擇Markdown Preview: Preview in Browser,選擇markdown，在瀏覽器中打開

在瀏覽器中的Markdown文檔效果如下

在修改Markdown文檔后，可以刷新瀏覽器頁面，查看更新效果