scssのコード品質については stylelint,prettierを使ってscssのコード品質を保つ - Qiitaを参考。
また、.jsと.vueが混在しているプロジェクトを想定。(.jsについてはjQueryも使っている想定)
eslint, prettierをインストール
$ yarn add babel-eslint eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-vue
参考
- babel-eslint - npm
- eslint - npm
- eslint-config-airbnb - npm
- eslint-config-prettier - npm
- eslint-plugin-import - npm
- eslint-plugin-prettier - npm
- eslint-plugin-vue - npm
prettierrcの設定・.eslintrc.jsonの設定
.prettierrc
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"proseWrap": "preserve"
}
参考
.eslintrc.json
.eslintrc.json
{
"env": {
"es6": true,
"browser": true,
"jquery": true // if use $
},
"plugins": [
"import"
],
"parserOptions": {
"parser": "babel-eslint",
"sourceType": "module",
"allowImportExportEverywhere": false
},
"extends": [
"airbnb-base",
"eslint:recommended",
"plugin:vue/recommended",
"plugin:prettier/recommended"
],
"globals": {
"gon": true
},
"rules": {
"semi": [
"error",
"never"
],
"comma-dangle": [
"error",
"never"
],
"no-param-reassign": [
"error", {
"ignorePropertyModificationsFor": [
"state"
]
}
],
"prettier/prettier": [
"error",
{
"printWidth": 120,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
]
}
}
参考
- prettierの使い方 - Qiita
- ESLintとPrettierを併用するときの設定(eslint-plugin-prettier, eslint-config-prettier) - dackdive’s blog
- Vue.jsにPrettier環境を設定するときのメモ - Qiita
- もうprettierで消耗したくない人へのvueでのeslint設定 - Qiita
- Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita
- Vue.jsスタイルガイドとeslint-plugin-vue検証ルールのマッピング - Qiita
- 運用中のVue.jsプロジェクトにESLintを入れるためにやったこと - Qiita
- ESLintのエラールール。日本語ざっくり解説スタイル編 - Qiita
package.json(npm script)
app/frontend/javascriptsよりも下にjs,vueファイルを入れている場合。
{
"scripts": {
"lint:javascript": "eslint --fix app/frontend/javascripts/**/*.{js,vue}"
},
}