svelte用ボイラープレート作ってるのでやったことメモ

概要

svelteの開発をするにあたって、とりあえずボイラープレートを作るところから始めようと思ったのでほぼ自分用のメモ書きです。

Linter/Prettierを入れる

npm-run-allを入れておくとタスクの複数実行が簡単なので便利です。

lintコマンド抜粋
階層が深い場合は**とか使って変えればいいかなと思います

package.json

  "scripts": {
    "lint": "npm-run-all -c lint:*",
    "lint:eslint": "eslint src/*.js",
    "lint:stylelint": "stylelint src/*.scss",
    "lint:prettier": "prettier --check src/*.{js,scss}",
    "format": "npm-run-all -c format:*",
    "format:eslint": "eslint --fix src/*.js",
    "format:stylelint": "stylelint --fix src/*.scss",
    "format:prettier": "prettier --write src/*.{js,scss,svelte}"
  }

JS

.eslintrc.js と .prettierrc はお好みで変えてください。。

なお、svelteファイル内のscriptタグはlintできない？みたいです
svelteファイルを対象にlintするとクラッシュします
↑eslint-plugin-prettierとeslint-plugin-svelte3の相性が悪いせいみたいです。。。
https://github.com/sveltejs/svelte/issues/3550

• eslint
• eslint-config-google(airbnb)
• eslint-config-prettier
• eslint-plugin-prettier
• (svelte)eslint-plugin-svelte3

yarn add eslint eslint-config-google eslint-config-prettier eslint-plugin-prettier eslint-plugin-svelte3 --dev

.eslintrc.js

module.exports = {
  parserOptions: {
    ecmaVersion: 2019,
    sourceType: 'module'
  },
  env: {
    es6: true,
    browser: true
  },
  plugins: ['prettier', 'svelte3'],
  overrides: [
    {
      files: ['**/*.svelte'],
      processor: 'svelte3/svelte3'
    }
  ],
  extends: ['prettier', 'google'],
  rules: {
    'prettier/prettier': 1
    // plus more rules...
  }
}

css/scss

• stylelint
• stylelint-scss
• stylelint-config-standard

yarn add stylelint stylelint-scss stylelint-config-standard --dev

.stylelintrc.json

{
  "plugins": [
    "stylelint-scss"
  ],
  "extends": "stylelint-config-standard"
}

husky,commitlint,lint-stagedを入れる

チーム開発をするにあたって事故がないように入れます。
lint-stagedは必要な拡張子を入れればOK。

• husky
• @commitlint/cli
• @commitlint/config-conventional
• lint-staged

yarn add husky @commitlint/cli @commitlint/config-conventional lint-staged --dev

package.json

  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{svelte}": [
      "yarn lint:prettier"
    ],
    "*.{js}": [
      "yarn lint:eslint"
    ],
    "*.{scss}": [
      "yarn lint:stylelint"
    ]
  }

husky

gitコマンドを打ったときに色々できるようになるやつと思えばOK。

commitlint

コミットメッセージのルールを強制できる。

fix: xxx などのルールに則った書き方でないと通らなくなる。

lint-staged

コミット対象ファイルをコミットする前にlintできる。

huskyでpre-commit時に全ファイルをlintしてもいいが対象ファイルだけlintするこっちのほうが早い。

scssを入れる

規模感にもよりますがとりあえず入れておきましょう。svelteの場合svelte-preprocessが必要。
また、styleの読み込み先の指定の追加が必要です。

• node-sass
• (svelte)svelte-preprocess

yarn add node-sass svelte-preprocess --dev

commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional']
};

webpack.config.js

    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
+           preprocess: require('svelte-preprocess')({ scss: true }),
            emitCss: true,
            hotReload: true
          }
        }
      }

App.svelte

- <style>
- h1 {
-   color: black;
- }
- </style>
+ <style src="./style.scss"></style>

リポジトリ