在 VSCode 中使用 Prettier
- VSCode 安裝 Prettier 插件汉额，不需要在項(xiàng)目目錄本地安裝 Prettier
npm i -D prettier
- 在項(xiàng)目目錄中創(chuàng)建
.prettierrc.js
module.exports = {
// 是否使用尾逗號(hào)
trailingComma: "none",
// 按 Tab 鍵的時(shí)候的縮進(jìn)方式，true 使用 tab 縮進(jìn)榨汤，false 將 tab 轉(zhuǎn)換為空格縮進(jìn)
useTabs: false,
// useTabs: false 的時(shí)候蠕搜，使用空格縮進(jìn)縮進(jìn)幾個(gè)空格
tabWidth: 4,
// 語(yǔ)句結(jié)尾是否加分號(hào)
semi: true,
// 字符串是否使用單引號(hào)
singleQuote: true
};
- 修改 VSCode 工作區(qū)配置文件
.vscode/settings.json
{
// 對(duì) js 文件關(guān)閉 vscode 自帶的 format
// "javascript.format.enable": false,
// 對(duì) ts 文件關(guān)閉 vscode 自帶的 format
// "typescript.format.enable": false,
// 優(yōu)先對(duì) js 文件采用 prettier 進(jìn)行 format，而不是 vscode 自帶的 format
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 優(yōu)先對(duì) ts 文件采用 prettier 進(jìn)行 format收壕，而不是 vscode 自帶的 format
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 保存的時(shí)候自動(dòng) format 代碼
"editor.formatOnSave": true
}
在 VSCode 中使用 ESLint
- VSCode 中安裝 ESLint 插件
- 在項(xiàng)目目錄中本地安裝 ESLint
npm i -D eslint
- 在項(xiàng)目目錄中創(chuàng)建
.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
es2021: true,
},
parser: 'espree',
parserOptions: {
ecmaVersion: 'latest',
},
extends: ['eslint:recommended'],
rules: {},
};
- 修改 VSCode 工作區(qū)配置文件
.vscode/settings.json
{
// 只使用 ESLint妓灌，不使用 Prettier 的時(shí)候，不要加下面三條
/*
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true
*/
// 保存的時(shí)候自動(dòng)進(jìn)行 lint 檢測(cè)蜜宪，并且自動(dòng)修復(fù)
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
在 VSCode 中同時(shí)使用 ESLint 和 Prettier
- VSCode 中安裝 ESLint 插件和 Prettier 插件
- 在項(xiàng)目目錄中安裝 ESLint
npm i -D eslint
- 在項(xiàng)目目錄中安裝 eslint-config-prettier
npm i -D eslint-config-prettier
- 在項(xiàng)目目錄中創(chuàng)建
.prettierrc.js
module.exports = {
// 是否使用尾逗號(hào)
trailingComma: "none",
// 按 Tab 鍵的時(shí)候的縮進(jìn)方式虫埂，true 使用 tab 縮進(jìn)，false 將 tab 轉(zhuǎn)換為空格縮進(jìn)
useTabs: false,
// useTabs: false 的時(shí)候圃验，使用空格縮進(jìn)縮進(jìn)幾個(gè)空格
tabWidth: 4,
// 語(yǔ)句結(jié)尾是否加分號(hào)
semi: true,
// 字符串是否使用單引號(hào)
singleQuote: true
};
- 在項(xiàng)目目錄中創(chuàng)建
.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
es2021: true,
},
parser: 'espree',
parserOptions: {
ecmaVersion: 'latest',
},
extends: ['eslint:recommended', 'prettier'],
rules: {},
};
- 修改 VSCode 工作區(qū)配置文件
.vscode/settings.json
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
