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

# 概要

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

## Linter/Prettierを入れる

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

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

```json: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

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

```javascript:.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

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

```json:.stylelintrc.json
{
  "plugins": [
    "stylelint-scss"
  ],
  "extends": "stylelint-config-standard"
}

```

## husky,commitlint,lint-stagedを入れる

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

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

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

```json: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

```zsh
yarn add node-sass svelte-preprocess --dev
```

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

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

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

## リポジトリ

https://github.com/Ancient-Scapes/svelte-boilerplate