安裝 StandardJS 及 補充實用套件

僅個人記錄用

前言

因為最近想嘗試編碼風格，於是就選了一套比較"不嚴格"的輔助工具來摸索。

• 編輯器 VS CODE
• 框架 VUE3
• 打包工具 VITE
• 編碼風格 Standard
• 環境 version

{
編輯器 VSCODE
  "nodejs":"v18.18.0",
  "npm":"9.8.1"
}

開始

專案建立

npm create vue

記得選" ESLint / Prettier "

接下來就 cd 進該專案 npm install

事前準備

• 在VSCODE安裝插件 " ESLint " 跟" Prettier ESLint "
• 在專案資料夾中加入「prettier」及「prettier-eslint」

npm i prettier prettier-eslint --save-dev

• 在專案資料夾中加入「standard」及「eslint-config-standard」

npm i standard eslint-config-standard --save-dev

• 點擊 VSCODE 上方搜尋框輸入如圖，或是按右鍵選擇

• 預設指向 Prettier ESLint

• 之後，我們在根目錄找到 .eslintrc.cjs 將其加入 'standard'

配合 npm install eslint-config-standard 使用的

測試

我們打開專案，如果程式碼沒有按照編碼風格規定的話，會提示一對紅色底線，只要利用快捷鍵 Alt + Shift + F 就能幫你排好囉~~~

補充實用套件

“@vitejs/plugin-vue”: “⁴.5.2”,
“eslint”: “⁸.56.0”,
“eslint-config-standard”: “¹⁷.1.0”,
“eslint-import-resolver-alias”: “¹.1.2”,
“eslint-plugin-import”: “².29.1”,
“eslint-plugin-n”: “¹⁶.6.2”,
“eslint-plugin-promise”: “⁶.1.1”,
“eslint-plugin-vue”: “⁹.20.1”,
“gh-pages”: “⁶.1.1”,
“prettier”: “³.2.5”,
“prettier-eslint”: “¹⁶.3.0”,
“sass”: “¹.69.7”,
“vite”: “⁵.0.10”,
“vite-plugin-eslint”: “¹.8.1”
“dotenv”: “¹⁶.3.1”,

• joker
• 2024/04/15