VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.


prettier/prettier 를 사용한 코드 포맷터 ( JavaScript / TypeScript / Css / HTML 등 지원 )


링크 : https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode




Format On Save

Respects editor.formatOnSave setting.

설정 범위를 지정하여 언어별 저장시 포맷을 사용하도록 설정할 수 있습니다.

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}


Settings

Prettier's Settings

Settings will be read from (우선순위로 나열):

  1. Prettier configuration file
  2. .editorconfig

Or if no prettier configuration file exist

  1. .editorconfig
  2. VSCode prettier's settings (기본값은 아래 설명되어 있음)

prettier.printWidth (default: 80)

Fit code within this line limit

prettier.tabWidth (default: 2)

Number of spaces it should use per tab

prettier.singleQuote (default: false)

If true, will use single instead of double quotes

prettier.trailingComma (default: 'none')

Controls the printing of trailing commas wherever possible. Valid options:

  • "none" - No trailing commas
  • "es5" - Trailing commas where valid in ES5 (objects, arrays, etc)
  • "all" - Trailing commas wherever possible (function arguments)

prettier.bracketSpacing (default: true)

Controls the printing of spaces inside object literals

prettier.jsxBracketSameLine (default: false)

If true, puts the > of a multi-line jsx element at the end of the last line instead of being alone on the next line

prettier.parser (default: 'babylon') - JavaScript only

Which parser to use. Valid options are 'flow' and 'babylon'.

prettier.semi (default: true)

Whether to add a semicolon at the end of every line (semi: true), or only at the beginning of lines that may introduce ASI failures (semi: false)

prettier.useTabs (default: false)

If true, indent lines with tabs

prettier.proseWrap (default: 'preserve')

(Markdown) wrap prose over multiple lines.

prettier.arrowParens (default: 'avoid')

Include parentheses around a sole arrow function parameter

prettier.jsxSingleQuote (default: false)

Use single quotes instead of double quotes in JSX.

prettier.htmlWhitespaceSensitivity (default: 'css')

Specify the global whitespace sensitivity for HTML files. Learn more here

prettier.endOfLine (default: 'auto')

Specify the end of line used by prettier. Learn more here

VSCode specific settings

These settings are specific to VSCode and need to be set in the VSCode settings file. See the documentation for how to do that.

prettier.eslintIntegration (default: false) - JavaScript and TypeScript only

Use prettier-eslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from ESLint rules.

prettier.tslintIntegration (default: false) - JavaScript and TypeScript only

Use prettier-tslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from TSLint rules.

prettier.stylelintIntegration (default: false) - CSS, SCSS and LESS only

Use prettier-stylelint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from stylelint rules.

prettier.requireConfig (default: false)

Require a 'prettierconfig' to format

prettier.ignorePath (default: .prettierignore)

Supply the path to an ignore file such as .gitignore or .prettierignore. Files which match will not be formatted. Set to null to not read ignore files. Restart required.

prettier.disableLanguages (default: ["vue"])

A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Prettier resolution

This extension will use prettier from your project's local dependencies. Should prettier not be installed locally with your project's dependencies, a copy will be bundled with the extension.

'생산성' 카테고리의 다른 글

Code Runner - 언어 코드 실행  (0) 2018.10.08
Comment Anchors - 앵커 태그 배치  (0) 2018.09.28
Bracket Pair Colorizer - 괄호 색상을 단계별로 표시  (0) 2018.09.19
Path Intellisense - 디렉토리 / 파일명 자동완성  (0) 2018.09.12
Indenticator - 들여쓰기를 시각적으로 강조  (0) 2018.09.08

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.


JavaScript 및 TypeScript 용 ES6 구문의 JavaScript 코드 스니펫 확장입니다.


링크 : https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets




지원 언어(파일 확장자)

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)
  • Vue (.vue)


Import and export

TriggerContent
imp→imports entire module import fs from 'fs';
imn→imports entire module without module name import 'animate.css'
imd→imports only a portion of the module using destructing import {rename} from 'fs';
ime→imports everything as alias from the module import * as localAlias from 'fs';
ima→imports only a portion of the module as alias import { rename as localRename } from 'fs';
rqr→require package require('');
mde→default module.exports module.exports = {};
enf→exports name function export const log = (parameter) => { console.log(parameter);};
edf→exports default function export default (parameter) => { console.log(parameter);};
ecl→exports default class export default class Calculator { };
ece→exports default class by extending a base one export default class Calculator extends BaseClass { };


Class Helpers

TriggerContent
con→adds default constructor in the class constructor() {}
met→creates a method inside a class add() {}
pge→creates a getter property get propertyName() {return value;}
pse→creates a setter property set propertyName(value) {}


Various methods

TriggerContent
fre→forEach loop in ES6 syntax array.forEach(currentItem => {})
fof→for ... of loop for(const item of object) {}
fin→for ... in loop for(const item in object) {}
anfn→creates an anonymous function (params) => {}
nfn→creates a named function const add = (params) => {}
dob→destructing object syntax const {rename} = fs
dar→destructing array syntax const [first, second] = [1,2]
sti→set interval helper method setInterval(() => {});
sto→set timeout helper method setTimeout(() => {});
prom→creates a new Promise return new Promise((resolve, reject) => {});
thenc→adds then and catch declaration to a promise .then((res) => {).catch((err) => {});


Console methods

TriggerContent
cas→console alert method console.assert(expression, object)
ccl→console clear console.clear()
cco→console count console.count(label)
cdi→console dir console.dir
cer→console error console.error(object)
cgr→console group console.group(label)
cge→console groupEnd console.groupEnd()
clg→console log console.log(object)
clo→console log object with name console.log('object :', object);
ctr→console trace console.trace(object)
cwa→console warn console.warn
cin→console info console.info
clt→console table console.table


저작자표시

'언어 > Script' 카테고리의 다른 글

Node Debug - Node.js 디버그  (0) 2018.12.06
npm Intellisense - npm 자동 완성  (1) 2018.11.15
npm - VSCode 에서 npm 지원  (0) 2018.11.15

+ Recent posts

티스토리툴바