当前位置: 首页 > Web前端 > vue.js

VSCode配置自动格式化,统一代码规范

时间:2023-04-01 02:14:14 vue.js

1。前言团队合作是一个小公司不可或缺的问题,也是保证项目开发进度的重要基石。只有团队合作,最大限度地发挥每个人的技能,才能确保团队的最大生产力。随着团队的增加,统一的代码风格变得越来越重要。为此,VSCode用于配置自动格式化和统一代码规范。2.代码风格javascript整体风格总体遵循ESlint规范。HTML和wxml一般遵循prettyhtml规范。调整了JavaScript细节。声明函数时禁止末尾无分号、超过140个字符、换行、单引号、尾部无逗号、箭头函数和不带分号的单个参数。括号前有空格3、准备插件Vuter,提供vue代码片段、语法支持、代码高亮等ESlint检查javascript语法检查和代码规范4、个性化配置1、打开VSCode配置文件设置.json在开发模式下,按快捷键ctrl+shirt+p,搜索Settings(JSON)2.个性化配置{//使用vscode-icons主题"workbench.iconTheme":"vscode-icons",//Fix每次保存时根据格式的代码"editor.formatOnSave":true,"editor.codeActionsOnSave":{"source.fixAll":true},"eslint.validate":["javascript","javascriptreact","vue"],"[javascript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[vue]":{"editor.defaultFormatter":"octref.vetur"},"[jsonc]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[html]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[css]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},//默认prettier格式支持的文件"vetur.format.defaultFormatter.js":"prettier","vetur.format.defaultFormatter.html":"prettyhtml","vetur.format.defaultFormatterOptions":{"prettier":{//末尾没有分号"semi":false,//超过140个字符"printWidth":140,//使用单引号"singleQuote":true,//没有尾随逗号"trailingComma":"none",//箭头函数单参数没有分号"arrowParens":"avoid"},"prettyhtml":{"printWidth":140}},//同上prettier格式化代码"prettier.semi":false,"prettier.printWidth":140,"prettier.trailingComma":"none","prettier.singleQuote":true,"prettier.arrowParens":"avoid","files.associations":{"*.cjson":"jsonc","*.wxss":"css","*.wxs":"javascript"},//指定wxml的格式"minapp-vscode.wxmlFormatter":"prettyHtml","minapp-vscode.disableAutoConfig":true}