Zenn
Closed9

Vite + Svelte + Eslint(airbnb) + Prettier + Stylelint + Storybook の開発環境構築メモ

Storybook
Svelte
#
環境構築
Vite
warugakiwarugaki

構築環境

  • windows10 WSL2 Ubuntu-20.04
  • node 16.13.0
  • npm 8.1.0
  • Vscode

機能

  • Vite
  • lint + format
    • Prettiter
    • Eslint
      • airbnb
    • Stylelint
    • storybook
warugakiwarugaki

Vite app

Viteの導入

npm init vite@latest

svelteを選択する～

npm init vite@latest
✔ Project name: … starter-vite-svelte
✔ Select a framework: › svelte
✔ Select a variant: › svelte

ディレクトリ移動とインストール

  cd starter-vite-svelte
  npm install
  npm run dev
warugakiwarugaki

.editorconfigを追加

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
warugakiwarugaki

Prettierの導入

公式｜Prettier
https://prettier.io/docs/en/install.html

https://github.com/sveltejs/prettier-plugin-svelte#readme

インストール

npm i --save-dev prettier-plugin-svelte prettier

prettierの設定

プロジェクトディレクトリ直下に.prettierrcを作成

.prettierrc
{
  "singleQuote": true,
  "trailingComma": "all"
}

npm scriptの追加

giti除外ファイルはフォーマット対象外にしておく

package.json
{
  "scripts": {
    "format:check": "prettier --check --ignore-path .gitignore --plugin-search-dir=. ./**/*.svelte",
    "format:fix": "prettier --write --ignore-path .gitignore --plugin-search-dir=. ./**/*.svelte"
  }
}

追記

json・css・jsファイルもフォーマット対象に

package.json
{
  "scripts": {
    "format:check": "prettier --check --ignore-path .gitignore --plugin-search-dir=. ./**/*.{json,css,js,cjs,svelte}",
    "format:fix": "prettier --write --ignore-path .gitignore --plugin-search-dir=. ./**/*.{json,css,js,cjs,svelte}"
  }
}
warugakiwarugaki

Eslintの導入

インストール

npm i -D eslint

自動設定

npx eslint --init

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes #No
✔ Where does your code run? · browser, node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2
✔ Would you like to install them now with npm? · No / Yes #Yes

Sveltev3コンポーネント用のESLintプラグインを追加

https://github.com/sveltejs/eslint-plugin-svelte3

インストール

npm i -D eslint-plugin-svelte3

Eslintの設定を追加（svelte3用）

.eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
+ plugins: [
+   'svelte3',
+ ],
  rules: {
  },
+  overrides: [
+   {
+     files: ['*.svelte'],
+     processor: 'svelte3/svelte3',
+   },
+ ],
};

npm scriptの追加

package.json
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "format:check": "prettier --check --ignore-path .gitignore --plugin-search-dir=. ./**/*.svelte",
  "format:fix": "prettier --write --ignore-path .gitignore --plugin-search-dir=. ./**/*.svelte",
+ "lint:eslint": "eslint --ignore-path .gitignore . --ext .js,.cjs,.svelte",
+ "fix:eslint": "eslint --fix --ignore-path .gitignore . --ext .js,.cjs,.svelte"
},

自動修正

npm run fix:eslint

自動修正できない箇所は手動で直していく～

.vite.config.js のエラー修正
※eslintのルールで無効化
devDependenciesのimportを許可

.eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  plugins: [
    'svelte3',
  ],
  rules: {
    'import/no-extraneous-dependencies': [
      'error',
      {
        devDependencies: true, // devDependenciesのimportを許可
      },
    ],
  },
  overrides: [
    {
      files: ['*.svelte'],
      processor: 'svelte3/svelte3',
      rules: {
        'import/no-mutable-exports': 'off',
        'import/prefer-default-export': 'off',
      },
    },
  ],
};

vscodeの設定

{
  "eslint.validate": [
    "svelte"
  ]
}
warugakiwarugaki

Stylelintの導入

必要パッケージのインストール

https://stylelint.io/
https://stylelint.io/migration-guide/to-14/#syntax-option-and-automatic-inferral-of-syntax stylelint-config-recess-order

公式の指定パッケージもインストールする
https://www.npmjs.com/package/stylelint-config-html

npm install --save-dev stylelint stylelint-config-standard postcss-html stylelint-config-html

パッケージのインストール（プロパティ順序ルール）

npm i -D stylelint-config-recess-order

stylelintの設定を追加

.stylelintrcを作成

.stylelintrc
{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recess-order",
    "stylelint-config-html"
  ]
}

npm scriptの追加

package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "format:check": "prettier --check --ignore-path .gitignore --plugin-search-dir=. ./**/*.svelte",
    "format:fix": "prettier --write --ignore-path .gitignore --plugin-search-dir=. ./**/*.svelte",
    "lint:eslint": "eslint --ignore-path .gitignore . --ext .js,.svelte",
    "fix:eslint": "eslint --fix --ignore-path .gitignore . --ext .js,.svelte",
+   "lint:stylelint": "stylelint --ignore-path .gitignore ./**/*.{css,svelte}",
+   "fix:stylelint": "stylelint --fix --ignore-path .gitignore ./**/*.{css,svelte}"
  }
}

エラーがでるので修正していく～

チェック

npm run lint:stylelint
stylelint エラー内容
src/App.svelte
 25:16  ✖  Expected newline after ":" with a multi-line declaration  declaration-colon-newline-after
 25:31  ✖  Expected newline after "," in a multi-line list           value-list-comma-newline-after
 25:51  ✖  Expected newline after "," in a multi-line list           value-list-comma-newline-after
 25:53  ✖  Expected double quotes                                    string-quotes
 25:63  ✖  Expected newline after "," in a multi-line list           value-list-comma-newline-after
 25:71  ✖  Expected newline after "," in a multi-line list           value-list-comma-newline-after
 26:13  ✖  Expected newline after "," in a multi-line list           value-list-comma-newline-after
 26:24  ✖  Expected newline after "," in a multi-line list           value-list-comma-newline-after
 26:26  ✖  Expected double quotes                                    string-quotes
 26:37  ✖  Expected newline after "," in a multi-line list           value-list-comma-newline-after
 26:39  ✖  Expected double quotes                                    string-quotes
 26:55  ✖  Expected newline after "," in a multi-line list           value-list-comma-newline-after
 31:5   ✖  Expected "padding" to come before "text-align"            order/properties-order
 37:5   ✖  Expected "width" to come before "height"                  order/properties-order
 43:5   ✖  Expected "font-size" to come before "text-transform"      order/properties-order
 46:5   ✖  Expected "margin" to come before "line-height"            order/properties-order
 47:5   ✖  Expected "max-width" to come before "margin"              order/properties-order

src/lib/Counter.svelte
 16:5   ✖  Expected "padding" to come before "font-size"     order/properties-order
 18:23  ✖  Expected modern color-function notation           color-function-notation
 18:40  ✖  Expected "0.1" to be "10%"                        alpha-value-notation
 20:5   ✖  Expected "border" to come before "border-radius"  order/properties-order
 20:23  ✖  Expected modern color-function notation           color-function-notation
 20:40  ✖  Expected "0" to be "0%"                           alpha-value-notation
 22:5   ✖  Expected "width" to come before "outline"         order/properties-order
 32:23  ✖  Expected modern color-function notation           color-function-notation
 32:40  ✖  Expected "0.2" to be "20%"                        alpha-value-notation

自動修正

npm run fix:stylelint

エラー解消ｗ

vscodeの設定例

Example .vscode/settings.json:

{
  "stylelint.validate": [
    "css",
    "postcss",
    "svelte"
  ]
}
warugakiwarugaki

storybookの導入

https://storybook.js.org/docs/react/get-started/install

インストール

npx sb init

storybook 起動｜エラーで起動できない

エラー内容

ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /home/warugaki/Project/starter-kit/starter-vite-svelte/.storybook/main.js from /home/warugaki/Project/starter-kit/starter-vite-svelte/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js not supported.
ERR! main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/warugaki/Project/starter-kit/starter-vite-svelte/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

ERR! main.js は、最も近い親の package.json に "type" が含まれる .js ファイルであるため、ES モジュールファイルとして扱われる。そのパッケージスコープにあるすべての.jsファイルをESモジュールとして宣言する "module "が含まれている.jsファイルだからです。
ERR! 代わりに、main.jsの名前を.cjsで終わるように変更するか、すべてのCommonJSモジュールで利用可能な動的import()を使用するように必須コードを変更するか、または "type "を変更します。「モジュール" を "タイプ" に変更します。または、/home/warugaki/Project/starter-kit/starter-vite-svelte/package.json の "type": "module" を "commonjs" に変更して、すべての .js ファイルを CommonJS として扱います（代わりにすべての ES モジュールに .mjs が使用されます）。

storybookのエラーを直していく～

修正案１.

.storybook/main.js
↓
.storybook/main.cjs にリネーム以上！！

修正案２.

package.json の "type": "module",　を削除する

storybookのサンプルを削除

storybookにコンポーネントが一つもないとおこられる～ので注意

Appコンポーネントのstorybookを作成

src/stories/App.stories.svelte

<script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
  import App from '../App.svelte';
</script>

<Meta title="App" component={App}/>

<Template let:args>
  <App {...args}/>
</Template>

<Story name="Default"/>
warugakiwarugaki

開発環境のアップデート

  • VSCodeの推奨拡張機能追加
  • gitignoreの更新
    • storybookのビルド（除外）
    • .vscodeをgit管理に
  • App コンポーネントの拡張
  • ソースコード管理の調整
    • index.html を srcディレクトリに移動
    • storybookのディレクトリはプロジェクトルート直下に移動
  • prettier と lint の 競合ルールの調整

eslint

インストール

npm i -D eslint-config-prettier

設定追加

.eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base',
+   'prettier',
  ],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  plugins: [
    'svelte3',
  ],
  rules: {
  },
  overrides: [
    {
      files: ['**/vite.config.js'],
      rules: {
        'import/no-extraneous-dependencies': 'off',
      },
    },
    {
      files: ['*.svelte'],
      processor: 'svelte3/svelte3',
      rules: {
        'import/no-extraneous-dependencies': 'off',
        'import/no-mutable-exports': 'off',
        'import/prefer-default-export': 'off',
      },
    },
  ],
};

stylelintlint

インストール

npm i -D stylelint-config-prettier

設定追加

.stylelintrc
{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recess-order",
    "stylelint-config-html",
+  "stylelint-config-prettier"
  ]
}
  • vscodeで保存時にフォーマットを実行できるように
  • prettierのフォーマット対象とeslintの対象ファイルの追加
  • npm scriptでlint & formatを並列実行できるように

インストール

npm i -D npm-run-all

npm script｜prettierの名前を 他と合わせておくほうがいいと今更思う・・・なので以下のように
変更

  • "format:check" → "lint:prettier
  • format:fix → fix:prettier

npm scriptに lint & format の並列実行コマンドを追加していく～

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint:prettier": "prettier --check --ignore-path .gitignore --plugin-search-dir=. ./**/*.{json,css,js,cjs,svelte}",
    "fix:prettier": "prettier --write --ignore-path .gitignore --plugin-search-dir=. ./**/*.{json,css,js,cjs,svelte}",
    "lint:eslint": "eslint --ignore-path .gitignore . --ext .js,.cjs,.svelte",
    "fix:eslint": "eslint --fix --ignore-path .gitignore . --ext .js,.cjs,.svelte",
    "lint:stylelint": "stylelint --ignore-path .gitignore ./**/*.{css,svelte}",
    "fix:stylelint": "stylelint --fix --ignore-path .gitignore ./**/*.{css,svelte}",
+   "lint:all": "run-s lint:eslint lint:stylelint lint:prettier",
+   "fix:all": "run-s fix:eslint fix:stylelint fix:prettier",
    "stylelint-check": "stylelint-config-prettier-check",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
}

package-lock.jsonは prettier のフォーマット対象外にしておく

"!package-lock.json" を追加

    "lint:prettier": "prettier --check --ignore-path .gitignore \"!package-lock.json\" --plugin-search-dir=. ./**/*.{json,css,js,cjs,svelte}",
    "fix:prettier": "prettier --write --ignore-path .gitignore \"!package-lock.json\" --plugin-search-dir=. ./**/*.{json,css,js,cjs,svelte}",

コマンド実行で対象外になっているか確認

npm run fix:all

> starter-vite-svelte@0.0.0 fix:all
> run-s fix:eslint fix:stylelint fix:prettier


> starter-vite-svelte@0.0.0 fix:eslint
> eslint --fix --ignore-path .gitignore . --ext .js,.cjs,.svelte


> starter-vite-svelte@0.0.0 fix:stylelint
> stylelint --fix --ignore-path .gitignore ./**/*.{css,svelte}


> starter-vite-svelte@0.0.0 fix:prettier
> prettier --write --ignore-path .gitignore "!package-lock.json" --plugin-search-dir=. ./**/*.{json,css,js,cjs,svelte}

.eslintrc.cjs 32ms
.storybook/main.cjs 5ms
.storybook/preview.js 7ms
.vscode/extensions.json 3ms
.vscode/settings.json 4ms
jsconfig.json 8ms
package.json 4ms
src/App.svelte 105ms
src/lib/Counter.svelte 18ms
src/main.js 7ms
stories/App.stories.svelte 17ms
vite.config.js 7ms

package-lock.jsonが対象外になっているのを確認

TODO

  • Jestの導入
このスクラップは2021/12/30にクローズされました