Prettier 입문

Prettier란?

코드 포맷터 (코드 성형 도구)

HTML, CSS, JavaScript, Markdown, YAML, GraphQL 등의 언어에 대응하고 있다 (자세한 것은 공식 사이트 참조)

Atom, Emacs, Espresso, Sublime Text, Vim, Visual Studio, VS Code, WebStorm 등의 에디터로 플러그인이 제공되고 있다 (물론 node의 모듈로서 단독으로도 사용할 수 있다)

코드 포맷터란?

다음과 같이 지정한 규칙에 따라 소스 코드를 자동 성형하는 도구.

HTML

<!-- 整形前 -->
<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="UTF-8" />
      <meta name="viewport"   content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Sample</title>
  </head>
    <body>
        Sample
  </body>

</html>


<!-- 整形後 -->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sample</title>
  </head>
  <body>
    Sample
  </body>
</html>

CSS

/* 整形前 */
.hogehoge {
    background-color: #fff;
  color: #000;
}
.hogehoge::before {
    content: "";
  }


/* 整形後 */
.hogehoge {
  background-color: #fff;
  color: #000;
}
.hogehoge::before {
  content: '';
}

JavaScript

// 整形前
const increment = x=>x++;


// 整形後
const increment = (x) => x++;

우선 사용해 보자

$ npm init -y
$ npm install --save-dev --save-exact prettier
$ npx prettier --write src/**/*.*

설정 변경

자세한 설정 값의 의미는 공식 사이트

.prettierrc.js

module.exports = {
  // デフォルト設定
  // printWidth: 80
  // tabWidth: 2,
  // useTabs: false,
  // semi: ture,
  // singleQuote: false,
  // quoteProps: 'as-needed',
  // jsxSingleQuote: false,
  // trailingComma: 'es5',
  // bracketSpacing: true,
  // jsxBracketSameLine: false,
  // arrowParens: 'always',
  // rangeStart: 0,
  // rangeEnd: Infinity,
  // jsxBracketSameLine: false,
  // requirePragma: false,
  // insertPragma: false,
  // proseWrap: 'preserve',
  // htmlWhitespaceSensitivity: "css",
  // vueIndentScriptAndStyle: false,
  // endOfLine: 'lf',
  // embeddedLanguageFormatting: 'auto',
  // 特定のファイルのみ設定をオーバーライドする
  overrides: [
    // HTMLファイル
    {
      files: '*.html',
      options: {}
    },
    // CSSファイル
    {
      files: '*.css',
      options: {}
    },
    // jsファイル
    {
      files: '*.js',
      options: {
        trailingComma: 'es5',
        arrowParens: 'always',
        singleQuote: true
      }
    }
  ]
};

파일을 저장할 때 자동 포맷하고 싶습니다.

다른 모듈과 조합하면 가능.

$ npm install --save-dev onchange
$ npx onchange "src/**/*.*" -- prettier --write {{changed}}

Prettier 입문

Prettier란?

코드 포맷터란?

우선 사용해 보자

설정 변경

파일을 저장할 때 자동 포맷하고 싶습니다.

샘플 코드

추천 설정

Reference

좋은 웹페이지 즐겨찾기