Zenn
Open15

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

Storybook
開発環境
Vite
warugakiwarugaki

構築環境

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

機能

  • Vite
  • lint + format
    • Prettiter
    • Eslint
      • airbnb
    • Stylelint
    • storybook（vite）
warugakiwarugaki

.editorconfig を追加

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

# top-most EditorConfig file
root = true

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

[*.md]
trim_trailing_whitespace = false
  • vscodeの推奨拡張機能も追加しておく

git 管理

  • .vscode ディレクトリはgit 管理する
warugakiwarugaki

Prettierの導入

npm i --D prettier-plugin-svelte prettier

.prettierrcを追加

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

npm script の追加

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

Eslintの導入

npm i -D eslint

npx eslint --init

足りていないパッケージのインストール

npm i -D eslint-config-airbnb-typescript eslint-plugin-svelte3 eslint-config-prettier

.eslintrc.cjsに設定を追加

./.eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base',
    'airbnb-typescript/base',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json'],
    extraFileExtensions: ['.svelte'],
  },
  plugins: ['svelte3', '@typescript-eslint'],
  rules: {
    'import/no-extraneous-dependencies': [
      'error',
      {
        devDependencies: true, // devDependenciesのimportを許可
      },
    ],
    'import/no-mutable-exports': 'off',
  },
  overrides: [
    {
      files: ['*.svelte'],
      processor: 'svelte3/svelte3',
    },
  ],
  settings: {
    // eslint-disable-next-line global-require
    'svelte3/typescript': () => require('typescript'), // pass the TypeScript package to the Svelte plugin
    // OR
    // 'svelte3/typescript': true, // load TypeScript as peer dependency
  },
};

npm scriptの追加

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

vscodeでファイル保存時にフォーマット& lint fix が実行できるように

.vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["svelte"]
}

Eslint ignorePatternsを追加

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
エラー解消のため

.eslintrc.cjs
module.exports = {
  ・・・省略
  ignorePatterns: ['.eslintrc.*', 'vite.config.*', 'svelte.config.*'],
  rules: {
    ・・・省略
  },
  overrides: [
    ・・・省略
  ],
  settings: {
・・・省略
  },
};
warugakiwarugaki

Stylelintの導入

npm install --save-dev stylelint stylelint-config-standard postcss-html stylelint-config-html stylelint-config-recess-order stylelint-config-prettier

stylelintの設定を追加

.stylelintrcを作成して以下を追加

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

npm scriptの追加

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

vscodeの設定

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "eslint.validate": ["svelte"],
  "css.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "postcss", "svelte"]
}
warugakiwarugaki

lint&formatの改善

npm-run-all を使って　lint or fixコマンドで一度に実行できるように

インストール

npm i -D npm-run-all

npm scriptの追加

{
    "lint:all": "run-s lint:eslint lint:stylelint lint:prettier",
    "fix:all": "run-s fix:eslint fix:stylelint fix:prettier"
}
warugakiwarugaki

インストール

npx sb@next init --builder storybook-builder-vite

storybook用のeslint plguin のインストール聞かれるので入れておく・・

Do you want to run the 'eslintPlugin' fix on your project? … yes

インストール後にルールの移動｜ 'airbnb-typescript/base',　の後に

.eslintrc.cjs
  extends: [
    'airbnb-base',
    'airbnb-typescript/base',
    'plugin:storybook/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',
  ],
warugakiwarugaki

storybook 起動

npm run storybook

この時点では、ビルドエラーで起動できないので
起動できるように修正していく～

ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /home/warugaki/project/starter-vite-svelte-ts/.storybook/main.js from /home/warugaki/project/starter-vite-svelte-ts/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-vite-svelte-ts/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

修正前にコミット

warugakiwarugaki

修正していく

git mv .storybook/main.js .storybook/main.cjs

git mv svelte.config.js svelte.config.cjs

パスの書き換え

.storybook/main.cjs
preprocess: require('../svelte.config.js').preprocess,
↓
preprocess: require('../svelte.config.cjs').preprocess,

svelte.config.cjsの中身を書き換える

svelte.config.cjs
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess(),
};
warugakiwarugaki

storybook 起動

npm run storybook

storybookの起動はできるが、ブラウザの自動起動ができないとコンソール上にエラー警告がでるので
自動起動しないようにオプションを付与

ERR! Could not open http://localhost:6006/ inside a browser. If you're running this command inside a
ERR! docker container or on a CI, you need to pass the '--ci' flag to prevent opening a
ERR! browser by default.
package.json
"storybook": "start-storybook --ci -p 6006",

あとDevtoos に以下の警告がでるが、修正方法がわからないのでスルー

  • ソースマップの読み込みエラー
  • configure() is deprecated and will be removed in Storybook 7.0.
    Please use the stories field of main.js to load stories.