必要なモジュール
- eslint（設定したルールに沿わないコードを報告します）
- prettier（コードフォーマッタ）
- eslint-config-prettier（Prettierと競合する可能性があるルールをoffにする）
- eslint-loader（コマンド実行せずにルールに沿わないコードを検知。あとで設定が必要）
- eslint-plugin-prettier (ESlintで設定したルールをPrettierに取り込む)
- eslint-plugin-vue（Vueファイルのパーサー）
- babel-eslint
必要なモジュールのインストールコマンド ワンライナー
npm i -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-prettier eslint-plugin-vue prettier
拡張機能
Vetur - Visual Studio Marketplace
Extension for Visual Studio Code - Vue tooling for VS Code
marketplace.visualstudio.com
ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.
marketplace.visualstudio.com
各種設定ファイルの内容
.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
'prettier'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
"semi": [2, "never"],
"no-console": "off",
"vue/max-attributes-per-line": "off",
"vue/html-self-closing": ["error", {
"html": {
"void": "always",
}
}],
}
}.vscode/settings.json
"eslint.autoFixOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
