[VSCode]Prettierの自動整形がうまくいかないんですけど!? チートコード

Nuxt.jsを使用したプロジェクトで、ESLint(文法チェックツール)とPrettier(コードの自動整形ツール。コードフォーマッター)を使用しているのですが、上司と画面共有を行いながらコードレビューをしていた際、どうやらPrettierが機能していないことが発覚!(自分で気づかんかい)

今までESLint様のお眼鏡に叶うようちまちまコードを直していたのですが、Prettierさえ動いてくれればそんな手間暇とはオサラバ!!

ということでPrettier機能有効化までの道のりを残しておきたいと思います。

command + ,(Windows: Ctrl + ,)

で設定画面を開き

右上のこのマークをクリック

VSCode setting

VSCodeのsettings.jsonファイルを開きます。

ESLint、Prettier関連の設定も含めたコード全部コピペしました(チートやん)。

{
    "php.executablePath": "/usr/bin/php",
    "php.validate.executablePath": "/usr/bin/php",
    "git.enabled": false,
    "git.path": "/usr/bin/git",
    "workbench.editor.enablePreview": false,
    "workbench.startupEditor": "newUntitledFile",
    "editor.tabCompletion": "on",
    "editor.quickSuggestionsDelay": 500,
    "editor.snippetSuggestions": "top",
    "editor.hover.enabled": false,
    "php-cs-fixer.rules": "@PSR2",
    "php-cs-fixer.formatHtml": true,
    "php-cs-fixer.executablePath": "/usr/local/bin/php-cs-fixer",
    "editor.minimap.enabled": false,
    "editor.insertSpaces": false,
    "editor.detectIndentation": false,
    "terminal.integrated.rendererType": "dom",
    "C_Cpp.updateChannel": "Insiders",
    "editor.acceptSuggestionOnEnter": "smart",
    "php-cs-fixer.onsave": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnPaste": true,
    /*
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    */
    "eslint.options": {
        "configFile": "./.eslintrc.js"
    },
    "editor.formatOnSave": false,
    // vueはfalse
    /*
    "[vue]": {
        "editor.formatOnSave": false,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    */
    "editor.codeActionsOnSaveTimeout": 3000,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.tslint": true,
        "source.fixAll": true
    },
    // "eslint.autoFixOnSave": true,
    /*
    "files.associations": {
        "*.vue": "vue"
    },
    */
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue",
        /*
        {
            "language": "vue",
            "autoFix": true
        }
        */
    ],
    "javascript.updateImportsOnFileMove.enabled": "always",
    "explorer.confirmDragAndDrop": false,
    "liveSassCompile.settings.generateMap": false,
    "terminal.integrated.copyOnSelection": true,
    "terminal.integrated.rightClickBehavior": "paste",
    "nativescript.analytics.enabled": false,
    "vscode-php-cs-fixer.toolPath": "/usr/local/bin/php-cs-fixer",
    "yaml.format.enable": true,
    "yaml.completion": true,
    "yaml.validate": true,
}
 

後から個別に調べるから今は許して…

個人ブログだから…

(懺悔)

【Nuxt.js】console.logでWarning :Unexpected console statementが出たときの対処法

いつもお世話になっております。今日もESLintに振り回されています。

検証のために入れたconsole.logにESLintがWarning出してきて、動くけどナンカキモチワルイ…という状態が続いておったのですね。

In JavaScript that is designed to be executed in the browser, it’s considered a best practice to avoid using methods on console. Such messages are considered to be for debugging purposes and therefore not suitable to ship to the client. In general, calls using console should be stripped before being pushed to production.

JavaScriptはブラウザで実行されるようデザインされているからconsoleで実行されるメソッドは避けるのがベストプラクティスだぜ!とESLintさんはおっしゃる訳です。そうは言ってもデバッグせにゃあ。

そんなわけで、プロジェクトディレクトリ直下の .eslintrc.js に下記を追加。

rules: {
'no-console': 'off', // console.log();OK
'no-unused-vars': 'off', // 使っていない変数あってもOK
},

しかしこちらを追記しても消えないWarning…なぜだ?

ESLint Warning

色々な記事を読み漁ってもルールを追記することしか書かれていません。同僚に相談したところ、「なんかESLint再起動?みたいなのした気がする」。とのこと。

yarn lintを実行。npm使ってる人はnpm run lintかな。

$ projectname % yarn lint
yarn run v1.22.10
$ yarn lint:js && yarn lint:style
$ eslint --ext ".js,.vue" --ignore-path .gitignore .
$ stylelint "**/*.{vue,css}" --ignore-path .gitignore
✨ Done in 3.24s.
$ projectname % yarn dev
yarn run v1.22.10

解決しました🥳🥳🥳

どうやらわざわざyarn devを実行しなくても、エディターとESLintをリンクさせる方法があるようです。

各種エディタでESLintのプラグインが提供されています。
これを使うことでいちいちコマンドを叩かずに済みます。
http://eslint.org/docs/user-guide/integrations#editors

Step by Stepで始めるESLint