Sublime Text3插件html-css-js-prett
2020-03-04 本文已影响0人
写写而已
本来是要配置到User的，但是最开始就修改Default，所以这里只有Default的，留着以后备用，保存自动格式化出来的js, html, css(less, scss)代码如下，完美支持vue！
<template>
<li class="check-type">
<el-alert class="check-alert" title="..." :closable="false" show-icon>
</el-alert>
<sline title="类型" size="big" class="pt5"></sline>
<ul class="flex types fxwrap">
<li @dblclick="dbtap(item)" :class="{'selected': data.jobType === item.value}" v-for="item in types" :key="item.value" class="middle pointer">
<h2><i class="iconfont pr5" style="font-size: 40px;" :class="item.icon"></i>{{item.title}}</h2>
<p class="plr15">{{item.description}}</p>
</li>
</ul>
<div class="center flex">
<el-button type="primary" size="small" @click="next(2)">下一步</el-button>
</div>
</li>
</template>
<script>
export default {
props: ['active', 'data'],
name: 'checkin-type',
data() {
return {
types: [{
title: 'Mysql2Hive',
forbid: false,
description: 'xxx-xxx'
}, {
title: 'Mongo2Hive',
forbid: true,
description: 'xxx-xxx'
}]
}
},
methods: {
dbtap(item) {
if (!item.forbid) {
this.next(2)
}
},
next(val) {
this.$emit('update:active', 2)
}
}
}
</script>
<style lang="less">
.check-type {
.form-line {
margin: 0 1.2%;
}
.types li {
box-sizing: border-box;
width: 30%;
&.selected {
background: #293d71;
color: #fff;
border-color: #21325e;
}
}
}
</style>
对jsx，ts也适用，但效果不佳，特别是jsx，不忍直视，其实jsx本身就不忍直视，不能怪插件，也可能是我自己没配置好，自己看情况谨慎选择我下面的配置，祝happy coding！
Prederences-Default
{
// 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/beautify-web/js-beautify
"all":
{
// These rules apply to any supported code that is going to be be prettified,
// and have the lowest level of precedence (meaning any of the settings in
// the 'html', 'css', 'js', 'json' and 'custom' categories override these).
// You can add other .jsbeautifyrc rules in this section too.
// End output with newline
"end_with_newline": false,
// Character(s) to use as line terminators.
"eol": "\n",
// Initial indentation level
"indent_level": 0,
// Indentation character
"indent_char": " ",
// Indentation size
"indent_size": 3,
// Indent with tabs, overrides `indent_size` and `indent_char`
"indent_with_tabs": true,
// Maximum number of line breaks to be preserved in one chunk (0 disables)
"max_preserve_newlines": 0,
// Whether existing line breaks before elements should be preserved (only works before elements, not inside tags or for text)
"preserve_newlines": true,
// Lines should wrap at next opportunity after this number of characters (0 disables)
"wrap_line_length": 0
},
"html":
{
// Rules added here apply only to HTML-like files, as determined by the
// rules specified for `global_file_rules` in the plugin settings. They
// take precedence over all of the settings in the 'all' category above.
// You can add other .jsbeautifyrc rules in this section too.
// e.g. {{#foo}}, {{/foo}}
"indent_handlebars": false,
// Indent <head> and <body> sections
"indent_inner_html": false,
// [keep|separate|normal]
"indent_scripts": "keep",
// List of tags that should not be reformatted. This should generally not be needed.
"unformatted": [],
},
"css":
{
// Rules added here apply only to CSS-like files, as determined by the
// rules specified for `global_file_rules` in the plugin settings. They
// take precedence over all of the settings in the 'all' category above.
// You can add other .jsbeautifyrc rules in this section too.
// Add a new line after every css rule
"newline_between_rules": false,
// Selector separator character
"selector_separator": " ",
// Separate selectors with newline or not (e.g. "a,\nbr" or "a, br")
"selector_separator_newline": false
},
"js":
{
// Rules added here apply only to JS-like files, as determined by the
// rules specified for `global_file_rules` in the plugin settings. They
// take precedence over all of the settings in the 'all' category above.
// You can add other .jsbeautifyrc rules in this section too.
// [collapse|collapse-preserve-inline|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or put end braces on own line, or attempt to keep them where they are
"brace_style": "collapse-preserve-inline",
// Break chained method calls across subsequent lines
"break_chained_methods": false,
// Put commas at the beginning of new line instead of end
"comma_first": false,
// Pass E4X xml literals through untouched
"e4x": true,
// If true, then jslint-stricter mode is enforced
"jslint_happy": false,
// Preserve array indentation
"keep_array_indentation": false,
// Preserve function indentation
"keep_function_indentation": false,
// [before-newline|after-newline|preserve-newline] Set operator position
"operator_position": "before-newline",
// Should the space before an anonymous function's parens be added, "function()" vs "function ()"
"space_after_anon_function": false,
// Should the space before conditional statement be added, "if(true)" vs "if (true)"
"space_before_conditional": true,
// Add padding spaces within empty paren, "f()" vs "f( )"
"space_in_empty_paren": false,
// Add padding spaces within paren, ie. f( a, b )
"space_in_paren": false,
// Should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
"unescape_strings": false
},
"json":
{
// Rules added here apply only to JSON-like files, as determined by the
// rules specified for `global_file_rules` in the plugin settings. They
// take precedence over all of the settings in the 'all' category above.
// You can add other .jsbeautifyrc rules in this section too.
// [collapse|collapse-preserve-inline|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or put end braces on own line, or attempt to keep them where they are
"brace_style": "expand",
// Preserve array indentation
"keep_array_indentation": false,
// Should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
"unescape_strings": false
},
"custom":
{
// Rules added here apply only to files matching specific glob strings,
// but respecting any whitelists or blacklists as determined by the
// rules specified for `global_file_rules` in the plugin settings. They
// take precedence over any of the settings in the categories above.
// For the following entries, keys are globs and values are objects which
// can contain any kind of .jsbeautifyrc setting.
"@(package?(-lock)|yarn-lock).json":
{
"indent_size": 2,
"brace_style": "collapse"
},
"*.sublime-@(settings|keymap|commands|menu)":
{
"indent_size": 4,
"brace_style": "expand"
}
}
}
Options-Default
{
// Simply using `node` without specifying a path sometimes doesn't work :(
// https://github.com/victorporof/Sublime-HTMLPrettify#oh-noez-command-not-found
// http://nodejs.org/#download
"node_path":
{
"windows": "C:/Program Files/nodejs/node.exe",
"linux": "/usr/bin/nodejs",
"osx": "/usr/local/bin/node"
},
// Automatically format when a file is saved.
"format_on_save": true,
// Automatically format when a file is opened. (Sublime Text 3 only)
"format_on_open": false,
// Automatically format when a file is focused. (Sublime Text 3 only)
"format_on_focus": false,
// Automatically format when a file loses focus. (Sublime Text 3 only)
"format_on_focus_lost": false,
// Automatically format while a file is being edited. (Experimental / Sublime Text 3 only)
"format_while_editing": false,
// Only format the selection if there's one available.
"format_selection_only": false,
// Save to a temporary file before prettifying.
"save_to_temp_file_before_prettifying": true,
"indent_char": " ",
// Indentation size
"indent_size": 3,
// Settings determining which files are allowed to be prettified.
// !!! All the keys below need to be included in your user settings for them to work. !!!
"global_file_rules":
{
// Be sure to include all of the `html`, `css`, `js` and `json` keys in your user settings
// if you want to be able to prettify the default files as well.
"html":
{
"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "vue"],
"allowed_file_syntaxes": ["html", "xml", "vue"],
"disallowed_file_patterns": []
},
// Be sure to include all of the `html`, `css`, `js` and `json` keys in your user settings
// if you want to be able to prettify the default files as well.
"css":
{
"allowed_file_extensions": ["css", "scss", "sass", "less"],
"allowed_file_syntaxes": ["css", "sass", "less"],
"disallowed_file_patterns": []
},
// Be sure to include all of the `html`, `css`, `js` and `json` keys in your user settings
// if you want to be able to prettify the default files as well.
"js":
{
"allowed_file_extensions": ["js", "jsx"],
"allowed_file_syntaxes": ["javascript", "ecma", "react", "babel"],
"disallowed_file_patterns": []
},
// Be sure to include all of the `html`, `css`, `js` and `json` keys in your user settings
// if you want to be able to prettify the default files as well.
"json":
{
"allowed_file_extensions": [
"json",
"babelrc",
"eslintrc",
"jshintrc",
"jsbeautifyrc",
"sublime-settings",
"sublime-keymap",
"sublime-commands",
"sublime-menu"
],
"allowed_file_syntaxes": ["json"],
"disallowed_file_patterns": []
}
},
// Respect `.editorconfig` rules, overriding settings from `.jsbeautifyrc`.
// Note that `use_editor_syntax` and `use_editor_indentation` have precedence
// and will always override any other settings from any configuration file
// like `.jsbeautifyrc` and `.editorconfig`.
"respect_editorconfig_files": true,
// Use current syntax to determine file type, instead of the extension.
"use_editor_syntax": true,
// Use current identation settings to override the ones from `.jsbeautifyrc`.
"use_editor_indentation": false,
// Log the settings passed to the prettifier from `.jsbeautifyrc`.
"print_diagnostics": true
}
快捷键设置，使用ctrl+tab切换标签文件（适用与macos，windows不需要设置）
[{
"keys": ["ctrl+tab"],
"command": "next_view_in_stack"
}]
sublime 设置，包括忽略搜索的文件/文件夹，是否拷贝空
{
"color_scheme": "Packages/Color Scheme - Default/Monokai.sublime-color-scheme",
"folder_exclude_patterns": [
"*.svn",
"*.git",
"*.hg",
"CVS",
"node_modules",
"dist"
],
"font_size": 16.6,
"ignored_packages": ["Vintage"],
"theme": "Adaptive.sublime-theme",
"copy_with_empty_selection": false
}
