Nuxt.js + TypeScript + Sass + ESLint 事始め

Nuxt.js + TypeScript

vue-cli で Nuxt.js + TypeScript の雛形がインストールできる。

vue init nuxt-community/typescript-template my-project

肝心のNuxt.js含めパッケージのバージョンが最新でないものが含まれるので適宜バージョンを上げる。
基本はその時のlatestを選べばいいが、Nuxt.jsがまだWebpack4に対応していない¹ため、ts-loader は3.xである必要がある。

中身を見てみると

nuxt.cinfig.js

// 略
modules: ['~/modules/typescript'],

modules/typescript.js

module.exports = function () {
  // Add .ts extension for store, middleware and more
  this.nuxt.options.extensions.push('ts');
  // Extend build
  this.extendBuild((config) => {
    const tsLoader = {
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/],
      },
    };
    // Add TypeScript loader
    config.module.rules.push(Object.assign(
      {
        test: /((client|server)\.js)|(\.tsx?)$/,
      },
      tsLoader,
    ));
    // Add TypeScript loader for vue files
    for (const rule of config.module.rules) {
      if (rule.loader === 'vue-loader') {
        rule.options.loaders.ts = tsLoader;
      }
    }
    // Add .ts extension in webpack resolve
    if (config.resolve.extensions.indexOf('.ts') === -1) {
      config.resolve.extensions.push('.ts');
    }
  });
};

モジュールを利用してTypeScriptに対応していることが分かる。

ESLint

Nuxt.jsのアプリケーションが無事立ち上がったらESLintを導入。

babel-eslint
eslint
eslint-config-prettier
eslint-plugin-react
eslint-config-airbnb-base
eslint-config-typescript
eslint-import-resolver-alias
eslint-plugin-import
eslint-plugin-prettier
eslint-plugin-typescript
eslint-plugin-vue
typescript-eslint-parser
vue-eslint-parser

この辺を devDependencies に追加。

.eslintrc.js はこんな感じになった。

.eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2017,
    sourceType: 'module',
  },
  env: {
    browser: true,
    node: true
  },
  extends: [
    'airbnb-base',
    'typescript',
    'plugin:vue/recommended',
  ],
  plugins: [
    'vue',
  ],
  settings: {
    'import/resolver': {
      'alias': [
        ['~', __dirname], // ルートディレクトリのエイリアス
      ],
    },
    'import/core-modules': [
      'vue', // vueはnuxtが抱えているため明記する必要がある
    ],
  },
  globals: {},
  rules: {},
}

CLIからESLintだけ走らせたいならこう。

package.json

"scripts": {
  "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}

VSCodeならESLintプラグインを入れて以下のように設定しておくと良い。

"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",
    {
        "language": "vue",
        "autoFix": true
    }
],

Sass

CSSを生で書きたくないのでSassに対応する。

npm install --save-dev node-sass sass-loader

これだけで

<style lang="scss" scoped>
// you can use scss syntax here.
</style>

また、雛形でassetsに入ってた main.css もscssに変える。

nuxt.config.js

// 略
css: [
  '~/assets/css/main.scss',
],

StyleLint

こちらに書きました。
Nuxt.js で .vue ファイルの SCSS に Lint を適当する

1. 2018.03.22時点。Webpack4対応はdevブランチにはマージ済みでリリース待ち状態。 ↩