代碼保存時(shí)自動(dòng)格式化
使用 Eslint Prettier vscode 配置文件
安裝 eslint
yarn add eslit - D
# 或者使用下面指令來(lái)初始化eslint配置
yarn eslint --init
然后再 package.json 文件中可以看到 eslintConfig 內(nèi)容， 也可在根目錄新增 .eslint.trc 文件，進(jìn)行 eslint 的配置彼妻。本文旨在 做自動(dòng)格式化， eslint 配置不做贅述畏鼓。
安裝 Prettier
yarn add prettier -D
安裝成功后在根目錄新增文件 prettier.json氮采。并且寫入下面配置代碼体捏。
// prettier.config.js or .prettierrc.js
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 2 個(gè)空格縮進(jìn)
tabWidth: 2,
// 不使用縮進(jìn)符塔插，而使用空格
useTabs: false,
// 行尾需要有分號(hào)
semi: false,
// 使用單引號(hào)
singleQuote: true,
// 對(duì)象的 key 僅在必要時(shí)用引號(hào)
quoteProps: 'as-needed',
// jsx 不使用單引號(hào)梗摇，而使用雙引號(hào)
jsxSingleQuote: false,
// 末尾不需要逗號(hào)
trailingComma: 'none',
// 大括號(hào)內(nèi)的首尾需要空格
bracketSpacing: true,
// jsx 標(biāo)簽的反尖括號(hào)需要換行
jsxBracketSameLine: false,
// 箭頭函數(shù)拓哟，只有一個(gè)參數(shù)的時(shí)候想许，也需要括號(hào)
arrowParens: 'always',
// 每個(gè)文件格式化的范圍是文件的全部?jī)?nèi)容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要寫文件開頭的 @prettier
requirePragma: false,
// 不需要自動(dòng)在文件開頭插入 @prettier
insertPragma: false,
// 使用默認(rèn)的折行標(biāo)準(zhǔn)
proseWrap: 'preserve',
// 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 換行符使用 lf
endOfLine: 'lf'
}
如果有特定的文件不需要Prettier來(lái)格式化，需要在根目錄創(chuàng)建 .prettierignore 文件断序，然后輸入 不需要格式化的文件或目錄流纹。然后要在對(duì)應(yīng)不需要格式化的文件中 添加 /* prettier-ignore */ 注釋。
# .prettierignore文件
node_modules
.umi
.umi-production
rsa2048.ts
# rsa2048.ts文件
/* prettier-ignore */
...
啟用 vscode 的配置文件
- 打開 vscode 編輯器的配置文件, 在 vscode 主界面快捷鍵 ctrl+shift+p , 彈窗里的 首選項(xiàng): Open WorkSpace Settings(JSON)违诗。然后就能在項(xiàng)目目錄中看到 .vscode 的文件目錄
- 在 .vscode/settings.json 文件中寫入下面配置代碼
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}
配置完成
保存文件時(shí)漱凝，會(huì)自動(dòng)去除行末尾的逗號(hào)。
對(duì)象冒號(hào)后面會(huì)自動(dòng)添加 空格诸迟。
代碼會(huì)自動(dòng)換行
高級(jí)選項(xiàng)
使用tabnin 茸炒， Quokka 等 vscode 拓展插件來(lái)智能補(bǔ)充代碼。
