vueのeslintとかprettierの設定をしよう！！

vueでwebサイトを作っていくよ

備忘録としてだから、気にせず書いていこう

まずはvueをcreateするよ

vue create hoge

その後の設定は以下

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

eslintとかの設定を頑張ろう

eslintの設定を変えていく

yarn eslint --init

yarn run v1.22.10
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? No
? Where does your code run? Browser
? What format do you want your config file to be in? JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest
? Would you like to install them now with npm? Yes

よくわからなかったけど、下の記事を参考にしました
最初の初期設定でpackage.jsonに設定を書く。みたいな設定にしちゃったけど大丈夫かな笑
PrettierとESLintをVSCodeで使う（Vue）

記事通り.eslintrc.jsに追加
ちょっとエラー出ちゃったので、そこだけ変えました

module.exports = {
    env: {
        browser: true,
        es6: true,
    },
    extends: [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:prettier/recommended",
    ],
    globals: {
        Atomics: "readonly",
        SharedArrayBuffer: "readonly",
    },
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: "module",
    },
    plugins: ["vue", "prettier"],
    rules: {
        "prettier/prettier": "error",
    },
};

記事ではprettierrcにも追加しているけど、今回はしない

.vscodeのsetting.jsonに以下を追加

{
    "workbench.colorTheme": "Default Light+", //ワークベンチのテーマ デフォルトの白
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.organizeImports": true,
        "source.fixAll": true
    },
    "editor.formatOnPaste": false,
    "editor.formatOnSave": false,
    "editor.formatOnType": true,
    "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript"],
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    "vetur.format.defaultFormatter.ts": "vscode-typescript",
    "vetur.validation.template": false
}

設定完了！！

おお、、これらをやったらいい感じにeslintも動くし、色とかもいい感じだ！！
あとは、eslintignoreとか今度作ろうかな