vscode配置——前端开发

1、常用插件安装

ESLint、Prettier、stylus、Vuetur、vscode-icons

2、配置

setting.json：

{
	// 配置来源 https://www.cnblogs.com/riddly/p/15718461.html
	// ========================= vscode配置 ===================================
	"editor.formatOnSave": true, // 每次保存的时候自动格式化
	"editor.tabSize": 2, // 设置tab的缩进为2
	"files.autoSave": "off", // 关闭文件自动保存
	"explorer.confirmDelete": false, //
	"editor.fontSize": 16, //设置文字大小
	"editor.lineHeight": 0, //设置文字行高
	"diffEditor.ignoreTrimWhitespace": false,
	"editor.lineNumbers": "on", // 开启行数提示
	"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数(名)和后面的括号之间加个空格
	// 指定各类文件格式化组件
	"[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
	"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
	"[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
	"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
	"[vue]": { "editor.defaultFormatter": "octref.vetur" },
	// ========================== prettier配置 ===============================
	"prettier.semi": false, //  去掉代码结尾的分号
	"prettier.singleQuote": true, // 使用单引号
	"prettier.tabWidth": 4,
	"prettier.useTabs": true,
	// ========================== vetur配置 ===================================
	"vetur.format.defaultFormatter.html": "js-beautify-html",
	"vetur.format.defaultFormatter.js": "prettier", // 让vue中的js按"prettier"格式进行格式化
	"vetur.format.defaultFormatterOptions": {
		"js-beautify-html": {
			// wrap_attributes 对属性进行换行
			//    - auto: 仅在超出行长度时才对属性进行换行。
			//    - force: 对除第一个属性外的其他每个属性进行换行。
			//    - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
			//    - force-expand-multiline: 对每个属性进行换行
			//    - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐
			"wrap_attributes": "auto",
			"wrap_line_length": 300,
			"end_with_newline": false,
			"semi": false,
			"singleQuote": true
		},
		"prettier": {
			"printWidth": 300, // 最大折行宽度
			"semi": false,
			"singleQuote": true
		}
	},

	// ========================== stylus 配置 ================================
	"stylusSupremacy.insertColons": false, // 是否插入冒号
	"stylusSupremacy.insertSemicolons": false, // 是否插入分号
	"stylusSupremacy.insertBraces": false, // 是否插入大括号
	"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
	"stylusSupremacy.insertNewLineAroundBlocks": false,
	// ======================== ESLint相关配置 ==============================
	"editor.codeActionsOnSave": {
		// 每次保存的时候将代码按eslint格式进行修复
		"source.fixAll.eslint": true
	},
	"eslint.options": {
		"plugins": ["html"]
	},
	"eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
	// ======================== vscode-icons相关配置 ==============================
	"workbench.iconTheme": "vscode-icons" //需要安装插件vscode-icons
}