VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.
VSCode 에서 코드를 이쁘게 변경해 주는 확장입니다.
링크 : https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
Visual Studio Code 에서 javascript, JSON, CSS, Sass 와 HTML 의 코드를 이쁘게 변경해 줍니다.
CSS 변경전
CSS 변경후
| .jsbeautifyrc setting | VS Code setting |
|---|
| eol | files.eol |
| tab_size | editor.tabSize |
| indent_with_tabs (inverted) | editor.insertSpaces |
| wrap_line_length | html.format.wrapLineLength |
| wrap_attributes | html.format.wrapAttributes |
| unformatted | html.format.unformatted |
| indent_inner_html | html.format.indentInnerHtml |
| preserve_newlines | html.format.preserveNewLines |
| max_preserve_newlines | html.format.maxPreserveNewLines |
| indent_handlebars | html.format.indentHandlebars |
| end_with_newline | html.format.endWithNewline (html) |
| end_with_newline | file.insertFinalNewLine (css, js) |
| extra_liners | html.format.extraLiners |
| space_after_anon_function | javascript.format
.insertSpaceAfterFunctionKeywordForAnonymousFunctions |
| space_in_paren | javascript.format
.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis |
Note that the html.format settings will ONLY be used when the document is html. javascript.format settings are included always.
Also runs html and css beautify from the same package, as determined by the file extension. The schema indicates which beautifier each of the settings pertains to.
The .jsbeautifyrc config parser accepts sub elements of html, js and css so that different settings can be used for each of the beautifiers (like sublime allows). Note that this will cause the config file to be incorrectly structured for running js-beautify from the command line.
Settings are inherited from the base of the file. Thus:
{
"indent_size": 4,
"indent_char": " ",
"css": {
"indent_size": 2
}
}
Will result in the indent_size being set to 4 for JavaScript and HTML, but set to 2 for CSS. All will get the same indent_char setting.
If the file is unsaved, or the type is undetermined, you'll be prompted for which beautifier to use.
You can control which file types, extensions, or specific file names should be beautified with the beautify.languagesetting.
{
"beautify.language": {
"js": {
"type": ["javascript", "json"],
"filename": [".jshintrc", ".jsbeautifyrc"]
// "ext": ["js", "json"]
// ^^ to set extensions to be beautified using the javascript beautifier
},
"css": ["css", "scss"],
"html": ["htm", "html"]
// ^^ providing just an array sets the VS Code file type
}
}
Beautify on save will be enabled when "editor.formatOnSave" is true.
Beautification on particular files using the built in Format Document (which includes formatting on save) can be skipped with the beautify.ignore option. Using the Beautify file and Beautify selection will still work. For files opened from within the workspace directory, the glob patterns will match from the workspace root. For files opened from elsewhere, or when no workspace is open, the patterns will match from the system root.
Examples:
/* ignore all files named 'test.js' not in the root folder,
all files directly in any 'spec' directory, and
all files in any 'test' directory at any depth
*/
"beautify.ignore": ["*/test.js", "**/spec/*", "**/test/**/*"]
/* ignore all files ending in '_test.js' anywhere */
"beautify.ignore": "**/*_test.js"
Note that the glob patterns are not used to test against the containing folder. You must match the filename as well.
Embedded version of js-beautify is v1.8.4
Use the following to embed a beautify shortcut in keybindings.json. Replace with your preferred key bindings.
{
"key": "cmd+b",
"command": "HookyQR.beautify",
"when": "editorFocus"
}
