EsLint 我們重頭來過吧

本文記錄在 vscode 裡面從頭安裝 EsLint、prettier & eslint-prettier

Visual Studio Code 外掛自助餐｜#3 ESLint 讓一切井然有序

一、安裝 EsLint

0. 先切到專案資料夾底下

1. $ npm init

2. $ npm i eslint  i = install

3. $ eslint --init 這些規則設好以後會在 .eslintrc.json 檔案裡面

a. How would you like to use ESLint?

To check syntax, find problems, and enforce code style

b. What type of modules does your project use?

JavaScript modules (import/export)

c. Which framework does your project use?

choose whatever that fit the situation

d. Does your project use TypeScript?

same as above

e. Where does your code run?

press a to select both

f. How would you like to define a style for your project?

Answer questions about your style

g. What format do you want your config file to be in?

JSON

h. What style of indentation do you use?

Space

i. What quotes do you use for strings?

Double

j. What line endings do you use?

I am in mac so choose Unix, be careful to this question

k. Do you require semicolons? Y

4. 在 vscode 的 settings 裡面，user 的話是整個 vscode 都用這個風格；workspace 是只有這個專案

// settings.json

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

  "files.insertFinalNewline": true
}

記得要安裝 vscode 裡面的外掛，搜尋 EsLint 裝最熱門的那個，順便把 prettier & eslint-prettier 都裝一裝。

可以隨意新增一個檔案，裡面放一些基本的 code 來測試，這時應該會出現一些 EsLint 提示。

二、安裝 prettier & eslint-prettier 並且啟用它們

參考資料：鐵人賽：透過 ESLint 學習 JavaScript ES6、VSCode Prettier 整合 ESLint 自動排版

錯誤訊息：Error: r is not a constructor

暫時無法排解