僅個人記錄用
前言
因為最近想嘗試編碼風格，於是就選了一套比較"不嚴格"的輔助工具來摸索。
- 編輯器 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
