必备软件 sublime text
1.sublime软件下载
http://www.sublimetext.com/3 软件下载
2.emmet语法速查表
emmet语法可以用简单的代码生成大段代码,
例如:在编辑器中输入缩写代码:ul>li*5
按下tab
键,得到以下代码
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
https://www.w3cplus.com/tools/emmet-cheat-sheet.html
3.快捷键
ctrl+/
代码加注释 ctrl+Shift+{
收空格ctrl+Shift+}
加空格
4.html-css Prettify安装
html-css-js Prettify用来格式化代码样式。
未被格式化的代码
<div id="test">
<span>
123123</span>
</div>
格式化后的代码
<div id="test">
<span>123123</span>
</div>
(1) 安装package control
sublime3默认是没有package control
的,到github下载并解压包后,改名为Package Control
文件夹。
(https://github.com/wbond/package_control)
在菜单栏选择Preferences > Browse packages
,将刚解压改名后的文件放在该路径下。
重启sublime后,package control 就加载成功了。
tips: 无法下载原版的解决方案
(因为某些特殊原因,原版无法下载install package。在此之前还需要多做一步 Preferences > Package Settings > Package Control > Settings Default
。 会打开图中所示文件,将文件中channels的默认链接改为图中的链接(https://raw.githubusercontent.com/SuCicada/channel_v3.json/master/channel_v3.json)
即可。
(2) ctrl+shift+P 打开面板。找到Package Control: Install Package。
(3) 等待下载完package包后,新弹出的面板中输入html-css-js prettify就可以找到对应的插件了。
(4) 下载完了prettify,需要安装node.js
(https://nodejs.org/en/) 尽量选择默认安装C盘路径。
(5) 更改prettify配置右键
>html-css-js prettify
>prettify Preferences - default
在打开的html-css-js prettify配置文件中用如下代码进行覆盖即可。
{
// The plugin looks for a .jsbeautifyrc file in the same directory as the
// source file you're prettifying (or any directory above if it doesn't exist,
// or in your home folder if everything else fails) and uses those options
// along the default ones.
// 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": "\t", // 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": 1, // Indentation size
"max_preserve_newlines": 10, // 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": "\t", // Indentation character
"indent_size": 1, // 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"],
// Set brace_style
// collapse: (old default) Put braces on the same line as control statements
// collapse-preserve-inline: (new default) Same as collapse but better support for ES6 destructuring and other features. https://github.com/victorporof/Sublime-HTMLPrettify/issues/231
// expand: Put braces on own line (Allman / ANSI style)
// end-expand: Put end braces on own line
// none: Keep them where they are
"brace_style": "collapse",//"collapse-preserve-inline"
"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": "\t", // Indentation character
"indent_level": 0, // Initial indentation level
"indent_size": 1, // Indentation size
"indent_with_tabs": true, // Indent with tabs, overrides `indent_size` and `indent_char`
"jslint_happy": true, // 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)
}
}
(6) 可能需要重启一下电脑。