本人環境
個人認為格式化代碼應當以eslint為基礎,添加符合個人習慣的風格形成一套格式化代碼的配置
vue-cli v4.5.6創建的vue3.0使用Typescript的項目eslint-standard
- vscode安裝插件
eslintveturperttier
下面開始講解最簡單的配置vue格式化
editorConfig的存在
可能會有疑惑為什么會說到這個的配置,以下:
最新vue-cli創建出的項目選擇了manual進行配置,最終構建的項目結構的根目錄下出現了.editorconfig這個配置文件,本來沒有當回事,只是像往常一樣把indent_size = 2改成了indent_size = 4
直到在settings.json里面配置prettier.semi等一系列配置都不生效的時候,才去看prettier輸出的log發現了一條關鍵信息:
意思是:檢測到本地的.editorconfig文件,vscode的配置不會被使用,果然在刪除了.editconfig文件后,vscode的settings.json中配置的prettier開始生效
解決方案:可以在根目錄同樣創建.prettierrc文件來進行配置,而不是在settings.json里面配置
perttier
個人傾向於用eslint來格式化代碼,但是在.vue文件中往往會有
<template>標簽里面的html代碼以及<style>標簽的樣式代碼需要格式化,僅僅依靠eslint作為代碼格式化工具有些不足(也有可能是我沒找到在哪里配置)
只用prettier存在的問題:eslint規范的函數命名與后面的括號之間需要空格,但是prettier好像沒辦法做到,好像似乎可以依賴於settings.json里面:
// #讓函數(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
不知道是否有效,后面可以依賴於eslint來修復這個問題
我的prettier配置
.prettierrc
//僅僅只對js/ts部分做了部分修改,其他全是默認配置
{
//取消末尾分號
"semi":false,
"tabWidth": 4,
"printWidth": 120
}
如下gif,按下alt+shift+f后 代碼格式化了,唯一的問題就是函數后面空格的問題
保存時使用eslint修復
貼代碼:
settings.json
// 自動修復
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
如下gif,按下command+s保存后,使用了eslint自動修復
總結
通過以上兩個配置,可以最快最少的格式化所有代碼並且js/ts符合eslint規范,只是每次需要先格式化代碼再保存,即先alt+shift+f,再command+s