配置

JowayYoung大约 4 分钟

对接

@yangzw/bruce-std必须在VSCode中使用，VSCode安装之后进入这些对接步骤。为了保障每次修改的配置都能生效，就必须重启VSCode。

打开VSCode
选择左边工具栏的插件，搜索并安装Beautify/Prettier/Stylelint/Eslint/Markdownlint/Editorconfig，安装之后重启VSCode
选择文件 → 首选项 → 设置，设置可选用户或工作区
- 用户：配置生效之后会作用于全局项目(如果大部分项目都是单一的React应用或Vue应用，推荐使用全局配置)
- 工作区：配置生效之后只会作用于当前打开项目
点击设置右上角最左边的图标打开设置(json)，对应文件是settings.json，打开配置文件
插入这些配置并重启VSCode

{
	// 系统设置
	"css.validate": false, // Stylelint
	"less.validate": false, // Stylelint
	"scss.validate": false, // Stylelint
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": "explicit", // Eslint
		"source.fixAll.stylelint": "explicit" // Stylelint
	},
	"editor.defaultFormatter": "esbenp.prettier-vscode", // Prettier
	"editor.detectIndentation": false,
	"editor.fontSize": 14,
	"editor.formatOnPaste": true, // Prettier
	"editor.formatOnSave": true, // Prettier
	"editor.insertSpaces": false,
	"editor.lineHeight": 25,
	"files.eol": "\n",
	"javascript.updateImportsOnFileMove.enabled": "always",
	"security.workspace.trust.untrustedFiles": "open",
	"typescript.updateImportsOnFileMove.enabled": "always",
	"window.zoomLevel": 1,
	// Beautify
	"beautify.config": {
		"indent_with_tabs": true,
		"wrap_line_length": 0
	},
	// Eslint
	"eslint.nodePath": "path/@yangzw/bruce-std/node_modules/eslint",
	"eslint.options": {
		"overrideConfigFile": "path/@yangzw/bruce-std/dist/eslintrc.cjs" // Eslint暂未支持ESM形式的配置文件
	},
	// Markdownlint
	"markdownlint.config": {
		"MD001": false,
		"MD007": false,
		"MD010": false,
		"MD013": false,
		"MD033": false,
		"MD036": false,
		"MD041": false,
		"MD045": false,
		"MD047": false
	},
	// Prettier
	"prettier.configPath": "path/@yangzw/bruce-std/dist/prettier.config.cjs", // Prettier暂未支持ESM形式的配置文件
	"prettier.ignorePath": "path/@yangzw/bruce-std/.prettierignore",
	"prettier.arrowParens": "avoid", // Prettier兜底配置，防止prettier.config.cjs失效
	"prettier.quoteProps": "preserve", // Prettier兜底配置，防止prettier.config.cjs失效
	"prettier.tabWidth": 4, // Prettier兜底配置，防止prettier.config.cjs失效
	"prettier.trailingComma": "none", // Prettier兜底配置，防止prettier.config.cjs失效
	"prettier.useTabs": true, // Prettier兜底配置，防止prettier.config.cjs失效
	// RemoveFinalNewlines
	"files.removeFinalNewlines": true,
	// Stylelint
	"stylelint.configFile": "path/@yangzw/bruce-std/dist/stylelint.config.cjs",
	"stylelint.stylelintPath": "path/@yangzw/bruce-std/node_modules/stylelint",
	"stylelint.validate": ["html", "css", "scss", "less", "vue"],
	// 独立文件
	"[html]": {
		"editor.defaultFormatter": "HookyQR.beautify"
	},
	"[wxml]": {
		"editor.defaultFormatter": "HookyQR.beautify"
	},
	"[css]": {
		"editor.formatOnPaste": false,
		"editor.formatOnSave": false,
		"files.removeFinalNewlines": false
	},
	"[less]": {
		"editor.formatOnPaste": false,
		"editor.formatOnSave": false,
		"files.removeFinalNewlines": false
	},
	"[scss]": {
		"editor.formatOnPaste": false,
		"editor.formatOnSave": false,
		"files.removeFinalNewlines": false
	},
	"[javascript]": {
		"editor.formatOnPaste": false,
		"editor.formatOnSave": false
	},
	"[typescript]": {
		"editor.formatOnPaste": false,
		"editor.formatOnSave": false
	},
	"[javascriptreact]": {
		"editor.formatOnPaste": false,
		"editor.formatOnSave": false
	},
	"[typescriptreact]": {
		"editor.formatOnPaste": false,
		"editor.formatOnSave": false
	},
	"[json]": {
		"editor.defaultFormatter": "HookyQR.beautify"
	}
}

配置中的path为@yangzw/bruce-std模块所在Npm根目录的node_modules，执行npm config get prefix获取Npm根目录并修改path。举个🌰，执行npm config get prefix获取的Npm根目录假设是E:/Node/prefix，那么将配置中的path替换为E:/Node/prefix/node_modules。

为了确保安装的插件具备有效性，VSCode及其所有插件都要保持最新版本。较旧版本的插件可能缺少某些功能或修复程序，会导致代码校验工具无法正常工作或产生不准确的结果。

🔥为了体验最佳效果，请始终保持VSCode及其所有插件的最新状态。

疑问

更新eslint到v6+就会失效

很多同学反映eslint 6+在VSCode中失效，最高使用版本只能控制在v5.16.0。其实这个本身就是配置问题，和版本无关。本项目的eslint使用v8，只要配置正确就能正常使用。

如果使用npm安装@yangzw/bruce-std，必须在settings.json中设置eslint.packageManager为npm(小写)，但是最新版本的Eslint已经默认此项，所以无需配置。如果使用yarn安装@yangzw/bruce-std，必须在settings.json中重置eslint.packageManager。

{
	"eslint.packageManager": "yarn"
}

首次安装Eslint并对接@yangzw/bruce-std，Eslint会失效

首次安装Eslint，可能会在js/ts/jsx/tsx/vue文件的控制台中看到Eslint失效的警告。

Eslint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.

这样说明Eslint已经被禁用，虽然配置中没有明确的禁用字段。移步到VSCode右下角的工具栏，会看到禁用图标+ESLINT的标红按钮，单击它就会弹出一个弹框，选择Allow Everywhere就能启用Eslint的校验功能。

最后，为了保障每次修改的配置都能生效，重启VSCode。

prettier无法禁用“插入结尾空行”的功能

在保存代码时，有些开发人员喜欢“插入结尾空行”，有些开发员就不喜欢“插入结尾空行”，而使用prettier美化代码之后就会强制使用结尾空行。prettier目前没有相关的配置可以禁用“插入结尾空行”的功能，即使配置.editorconfig的insert_final_newline = false禁止插入结尾空行也无法生效。

因为prettier在自己官网也说自己是一个固执己见的代码格式化程序，没有任何方式可以改变它的某些配置，除非修改它的源码。鉴于代码校验和文件格式的问题，对所有文件进行统一美化处理。

css/scss/less文件：使用stylelint和prettier进行美化，保留结尾空行
js/ts/jsx/tsx/vue文件：使用eslint进行美化，删除结尾空行
md文件：不做任何处理，可以配合Remove Final Newlines插件删除结尾空行
其它文件：使用prettier进行美化，可以配合Remove Final Newlines插件删除结尾空行

prettier以单个换行符结束所有文件且无法禁用它，所以prettier无法针对insert_final_newline = false生效，更多解决方案可以查看prettier/issues/6360和I'm trying to use prettier with editorconfig but prettier doesn't respect。如果喜欢“插入结尾空行”的功能，请不要安装Remove Final Newlines并删除相关的配置。