SublimeText3系列(3)- HTML-CSS-JS Prettify美化代码&Markdown Preview写作

本日重要引见HTML-CSSS-JS PrettifyMarkdown Preview两个插件

1.HTML-CSS-JS Prettify

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];
}

有了这个,个人认为在前端开辟中,能够不必AlignmentJsFormat这两个插件。
Alignment的代码对齐HTML-CSS-JS Prettify也有,JsFormat实际上也用的是js-beautify。
假如只是针对html、css与js代码,HTML-CSS-JS Prettify就够了

1.1HTML-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举行装置

1.2.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 <head> and <body> 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,\nbr" 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 "\x65\x78\x61\x6d\x70\x6c\x65"
    "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个空格

1.3.HTML-CSS-JS Prettify运用

运用Ctrl+Shift+H,优化当前代码文件。
运用js文件测试一下,优化前
《SublimeText3系列(3)- HTML-CSS-JS Prettify美化代码&Markdown Preview写作》
优化后
《SublimeText3系列(3)- HTML-CSS-JS Prettify美化代码&Markdown Preview写作》

js-beautify对css的格式化,有个问题是,会在解释下面插进去一行空缺字符
以下图,优化前
《SublimeText3系列(3)- HTML-CSS-JS Prettify美化代码&Markdown Preview写作》
优化后
《SublimeText3系列(3)- HTML-CSS-JS Prettify美化代码&Markdown Preview写作》
sublime text 3 插件:HTML-CSS-JS Prettify文中给出了解决方法,人人能够参考

2.Markdown Preview

Markdown的语法全由一些经由精挑细选的标记所构成。其目的是成为一种合适 誊写的收集言语。
Markdown 是一种轻易影象、誊写的纯文本标记言语,用户能够运用这些标记标记以最小的输入价值天生极富表现力的文档。
比方这篇博客就是用Markdown语法写的。
关于Markdown语法,可参考中文文档

2.1Markdown Preview装置

Markdown Preview的装置引荐运用PackageControl
Ctrl+Shift+P输入Install Package,然后输入Markdown Preview举行装置

2.2.Markdown Preview运用

可运用SublimeText3建立.md文件,根据Markdown语法输入要写的内容,以下图
《SublimeText3系列(3)- HTML-CSS-JS Prettify美化代码&Markdown Preview写作》
然后Ctrl+Shift+P输入mp,挑选Markdown Preview: Preview in Browser,挑选markdown,在浏览器中翻开
《SublimeText3系列(3)- HTML-CSS-JS Prettify美化代码&Markdown Preview写作》
在浏览器中的Markdown文档结果以下
《SublimeText3系列(3)- HTML-CSS-JS Prettify美化代码&Markdown Preview写作》
在修正Markdown文档后,能够革新浏览器页面,检察更新结果

    原文作者:铛铛铛铛
    原文地址: https://segmentfault.com/a/1190000004403767
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞