Edited at

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

More than 1 year has passed since last update.


Nuxt.js + TypeScript

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

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

肝心のNuxt.js含めパッケージのバージョンが最新でないものが含まれるので適宜バージョンを上げる。

基本はその時のlatestを選べばいいが、Nuxt.jsがまだWebpack4に対応していない1ため、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ブランチにはマージ済みでリリース待ち状態。