ESLint in VSCode

在 petKnow project ZY 設定了嚴格的 coding style, 我常常會因為多了一兩個 breakline 導致 eslint-plugin-prettier 報出錯誤無法繼續顯示跟工作。我查了一下自動讓 vscode making code to ESLint on save.

quote: https://www.masrinastudio.com/post/eslint-formatting-vscode-guide/

To use ESLint in VSCode, you’ll need to install the ESLint extension from the VSCode Marketplace. Once you’ve installed the extension, you’ll need to configure it to format your code on save.

1. Open your VSCode settings by clicking on the gear icon in the bottom left corner of the editor, or by pressing Ctrl + ,.

2. In the search bar at the top, type “editor.codeActionsOnSave”.

3. Click on “Edit in settings.json”. This will open your VSCode settings.json file.

4. Add the following lines to your settings.json file:

    "editor.codeActionsOnSave": { "source.fixAll.eslint": true},
    "eslint.alwaysShowStatus": true
   

Save your settings.json file and you’re done! This tells VSCode to run ESLint’s automatic code fixing whenever you save a file. The alwaysShowStatus option will show you the ESLint status for the current file in the status bar.

https://stackoverflow.com/questions/51012185/formatting-typescript-with-prettier-in-vscode
Add codes below to your setting.json file:

"[typescript]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }

typescript auto-formatting:
https://stackoverflow.com/questions/55537574/format-tsx-files-on-save-in-vs-code

{
  "typescript.format.enable": false,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

my .eslintrc.js file
拿掉 "plugin:vue/vue3-essential", 這行， *.vue 裡面的 auto-formatting on save 就失效了。

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
  ],
  rules: {
    "vue/multi-word-component-names": "off",
  },
};