コードフォーマッターの導入
コードフォーマッターとは
- ソースコードを整形してくれるツール
- イケてる環境は何かしら導入されてるはず
導入することの利点
- レビュー時に細かい指摘をしなくて済む
- ソースコードの品質を最低限担保することが出来る
この記事で紹介しない事
-
babel
やnode-sass
等のトランスパイルの環境には触れません
完成形
babel
やnode-sass
等のトランスパイルの環境には触れません最終的な内容はこちらのリポジトリにあります
紹介するフォーマッターの一覧
導入
作業ディレクトリの作成と移動
$ mkdir lint-demo && cd lint-demo
ディレクトリの初期化
$ npm init -y
ライブラリのインストール
$ yarn add -D prettier eslint stylelint
設定ファイルの追加
設定ファイルが無いとLintタスクの実行が出来ないので設定ファイルの追加を行う
Prettier
プロジェクトのルートディレクトリで.prettierrc
ファイルを追加
以下は設定の一例
{
"singleQuote": true,
"trailingComma": "all",
"htmlWhitespaceSensitivity": "css",
"printWidth": 120
}
ESLint
Parserを追加
$ yarn add -D babel-eslint
Prettier と併用する為に以下のpackagesを追加
$ yarn add -D eslint-plugin-prettier eslint-config-prettier
Google の推奨設定を利用する為に下記のpackageを追加
$ yarn add -D eslint-config-google
ESLintの設定ファイルはpackage.jsonに追加可能なので以下の用に記載
{
"eslintConfig": {
"parser": "babel-eslint",
"env": {
"browser": true
},
"extends": [
"google",
"plugin:prettier/recommended"
]
}
}
stylelint
Prettier との併用の為に下記のpackageを追加
$ yarn add -D stylelint-config-prettier
SCSS で利用出来るように下記のpackagesを追加
$ yarn add -D stylelint-scss stylelint-config-recommended-scss
スタイルのプロパティの並べ替えを行えるように以下を追加
$ yarn add -D stylelint-order stylelint-config-rational-order
displayによって無効になるプロパティを検知する為に、以下のpluginを追加
$ yarn add -D stylelint-declaration-block-no-ignored-properties
以下の用にpackage.jsonに追加すると設定を読み込んでくれる
{
"stylelint": {
"plugins": [
"stylelint-declaration-block-no-ignored-properties"
],
"extends": [
"stylelint-config-rational-order",
"stylelint-config-recommended-scss",
"stylelint-config-prettier"
],
"rules": {
"plugin/declaration-block-no-ignored-properties": true
}
}
}
実行環境の構築
Lintの実行にはnpm scriptsを利用する
Lint用にファイルを追加
# ディレクトリの作成
$ mkdir -p src/{scss,html,js}
# 空のファイルを追加
$ touch src/{html/index.html,js/main.js,scss/main.scss}
Git hooks でLintのタスクが実行される用に以下のパッケージを導入
$ yarn add -D husky lint-staged
package.json に以下を追加
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/html/**/*.html": "prettier --write",
"src/js/**/*.js": "eslint --fix",
"src/scss/**/*.scss": "stylelint --fix"
}
}
これでGitのコミットを実行すると、ファイルに合わせてLintのタスクが自動で実行されます。
レガシー環境を撲滅する参考にご利用下さい
Author And Source
この問題について(コードフォーマッターの導入), 我々は、より多くの情報をここで見つけました https://qiita.com/kkkaoru/items/f8201177d29f4a742cc1著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .