以前からなんとなくeslintは導入してあーだこーだしてたのですが、ポートフォリオサイトやブログサイトをNetlifyからFirebaseに移植する際に、github actions(CI)を使うようになり、せっかくだからもう少し本格的にlintやtestを導入してみようということで、色々調べて導入してみました。
その手順を初心者なりに備忘録としてまとめてみました。
(だいぶ我流な部分もありますが多めに見ていただければ幸いです)
アドバイスなどは大歓迎です。
知識が増えたら随時更新します。
https://github.com/taka1156/nuxt-blog - アトミックデザインの形にプロジェクトを見直し中
↑ブログのプロジェクトで導入してみました。(Nuxt.js + Firebase + microCMS 構成)
これらをインストール
eslint関連
yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue babel-eslint
stylelint関連
yarn add stylelint stylelint-config-standard stylelint-config-prettier stylelint-prettier
prettier
yarn add prettier
※ なんでprettierを入れたか
eslintだけだとエラーは出すが修正はしない項目(コード整形関連)もあるので併用する。
(逆にprettierは細かい命名規則や処理に関するエラーは出さない?)
設定ファイルを書く
{
"parserOptions": {
"parser": "babel-eslint",
"sourceType": "module"
},
"extends": [
"eslint:recommended",
"plugin:vue/recommended",
"plugin:prettier/recommended",
"prettier/vue"
],
"plugins": [
"vue"
],
"env": {
"jest": true,
"browser": true,
"es6": true,
"node": true
},
"globals": {},
"rules": {
"camelcase": [2,{"properties": "always"}],
"quotes": [2,"single", { "avoidEscape": true } ],
"eqeqeq": [2, "always", {"null": "ignore"}],
"prefer-const": 2,
"vue/component-name-in-template-casing": "off",
"vue/no-v-html": "off"
}
}
{
"extends": ["stylelint-config-standard", "stylelint-prettier/recommended"],
"rules": {
"color-no-invalid-hex": true,
"color-hex-case": "lower",
"selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$"
}
}
# ビルドファイル
dist
storybook-static
coverage
# 設定、モジュール
.nuxt
.storybook
node_modules
{
"printWidth": 85,
"tabWidth": 2,
"singleQuote": true,
"semi": true,
"bracketSpacing": true,
"arrowParens": "avoid"
}
scriptsを追加
"scripts": {
"lint-js": "eslint --ext .js,.vue .",
"lint-style": "stylelint \"**/*.vue\" \"**/*.css\"",
"lint-js:fix": "eslint --ext .js,.vue . --fix",
"lint-style:fix": "stylelint \"**/*.vue\" \"**/*.css\" --fix",
"lint:check": "yarn lint-js & yarn lint-style",
"lint:fix": "yarn lint-js && yarn lint-style",
...
}
お好みでvscode設定を追加
保存時に勝手にlint処理が走るようになるので便利
(vscode/setting.jsonに記述)
{
"comments": "保存時にeslint、stylelintを自動実行",
"eslint.alwaysShowStatus": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
}
eslint、stylelintについてざっくりと使い方やルールの指定方法についてわかってきたので、
積極的に活用して読みやすいコードを意識していきたいですね。
また、eslintルールについても、気になるものがあればまとめてみようと思います。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント