vscode代码格式化配置(前端)(纯代码-可直接拉取)

打开vscode的设置,如图

 复制粘贴以下代码

{
	// vscode默认启用了根据文件类型自动设置tabsize的选项

	"editor.detectIndentation": false,

	// 重新设定tabsize

	"editor.tabSize": 2,

	// #值设置为true时,每次保存的时候自动格式化;值设置为false时,代码格式化请按shift+alt+F

	"editor.formatOnSave": true,

	// #每次保存的时候将代码按eslint格式进行修复

	"eslint.autoFixOnSave": false,

	// 添加 vue 支持

	"eslint.validate": [
		"javascript",

		"javascriptreact",

		{
			"language": "vue",

			"autoFix": true
		}
	],

	//  #让prettier使用eslint的代码格式进行校验

	"prettier.eslintIntegration": true,

	//  #去掉代码结尾的分号

	"prettier.semi": true,

	//  #使用单引号替代双引号

	"prettier.singleQuote": true,

	"prettier.tabWidth": 2,

	//  #让函数(名)和后面的括号之间加个空格

	"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

	// #这个按用户自身习惯选择

	"vetur.format.defaultFormatter.html": "js-beautify-html",

	// #让vue中的js按"prettier"格式进行格式化

	"vetur.format.defaultFormatter.js": "prettier-eslint",

	"vetur.format.defaultFormatterOptions": {
		"js-beautify-html": {
			// #vue组件中html代码格式化样式

			"wrap_attributes": "auto", //也可以设置为“force-aligned”,效果会不一样

			"wrap_line_length": 400,

			"end_with_newline": false,

			"semi": false,

			"singleQuote": true
		},

		"prettier": {
			"semi": false,

			"singleQuote": true
		},

		"prettier.trailingComma": "none"
	},

	"[jsonc]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},

	// 格式化stylus, 需安装Manta's Stylus Supremacy插件

	// "stylusSupremacy.insertColons": false, // 是否插入冒号

	// "stylusSupremacy.insertSemicolons": false, // 是否插入分号

	// "stylusSupremacy.insertBraces": false, // 是否插入大括号

	// "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行

	// "stylusSupremacy.insertNewLineAroundBlocks": false,

	"prettier.useTabs": true,

	"files.autoSave": "off",

	"explorer.confirmDelete": false,

	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},

	"[json]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},

	"diffEditor.ignoreTrimWhitespace": false,
	"editor.wordWrap": "on" // 两个选择器中是否换行
}

  • 10
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值