Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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>

リポジトリ

Ancient_Scapes
たまに記事を書く
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away