Sapper ( Svelte ) の Lint / Prettier の設定を 📝

はじめに

Sapper プロジェクト作るたびに Lint の設定に時間を取られるのでメモしておきます。
（個人的なメモレベルなので変なところあったら教えてもらえると助かります！）

ESLint

Install

$ npm install \
  eslint \
  eslint-plugin-import \
  eslint-plugin-node \
  eslint-plugin-promise \
  eslint-plugin-standard \
  eslint-plugin-svelte3 \
  --save-dev

Settings

• .eslintrc.js
• .eslintignore

.eslintrc.js

module.exports = {
  parserOptions: {
    ecmaVersion: 2019,
    sourceType: 'module'
  },
  env: {
    es6: true,
    browser: true,
    node: true
  },
  extends: [
    'eslint:recommended'
  ],
  plugins: [
    'svelte3'
  ],
  ignorePatterns: [
    'public/build/'
  ],
  overrides: [
    {
      files: ['**/*.svelte'],
      processor: 'svelte3/svelte3'
    }
  ],
  rules: {
    'no-var': 'error'
  },
  settings: {
    // Nothing
  }
}

.eslintignore

/node_modules/
/__sapper__/
/src/node_modules/@sapper/
/cypress/

Usage

• package.json

package.json

"scripts": {
  "lint": "eslint . --ext .js,.svelte --fix",
},

$ npm run lint

Prettier

Install

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

Settings

• .prettierrc

.prettierrc

{
  "svelteSortOrder" : "styles-scripts-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": false,

  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120,
  "tabWidth": 2
}

Usage

• package.json

package.json

"scripts": {
  "format": "prettier --write --svelte-sort-order scripts-markup-styles ./**/*.svelte",
},

$ npm run format

まとめ

Svelte や Sapper めっちゃ早くて快適だからもっと流行ってほしいものです。
あと、 Lint まわりは公式で入ってほしいななんて……。