TIP
项目开发少不了多人协作,难免会碰到这类问题:由于大家对代码格式化配置不统一,就会产生版本冲突。
# 打开配置文件
1.Code -> preferences(首选配置) -> setting(设置)
; 2.快捷键 command + ,
;
配置模式界面就打开了,点击右上角红色区域按钮,就可以打开 setting.json
文件了。
# 编写配置文件
这块配置支持 html、css、js
等文件的格式化
# eslint 和 prettier
1.eslint
是用来做代码风格检查的,比较关注代码质量,并且会提示不符合风格规范的代码。除此之外 eslint
也具有一部分代码格式化的功能。这块配置长成这样
// 保存时格式化
"editor.formatOnSave": true,
// 设置 eslint 保存时自动修复
"eslint.autoFixOnSave": true
2.prettier
本身就是用来做代码格式化的,准确的说它是来美化代码的,所以这方面有更大的优势。同时 prettier
也是对 eslint
格式化的基础上的一个极好的补充。
- 那么两者都有格式化的功能,就不会有冲突吗? 有,不过只要简单的配置就可以解决了,比如语句末尾不加分号和强制单引号等 eslint 风格检查
// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,
# vue 文件
vscode 对 vue 支持也是很给力的,只需用 Vetur 插件,其配置直接用的 prettier 规范。这也是我们选择 prettier 格式化代码的另一个原因。
# 冲突
- eslint 推荐
function () {}
、prettier 则推荐function() {}
,如果喜欢用第一种风格那什么都不应该,如果你和我一样喜欢第二种,需要设置eslint.validate
, 将自动修复功能注释,保证走prettier
规范。如果项目中也设置了eslint
,还需要在eslintrc.js
中配置,
// eslintrc.js
module.exports = {
rules: {
'space-before-function-paren': 0
}
};
// setting.json
{
"window.zoomLevel": 0,
/** git **/
"git.path": null,
"git.autofetch": true,
/** files **/
// 标签自动补全
"files.associations": {
"*.vue": "vue",
"*.wxss": "css",
"*.wxml": "html",
"*.ts": "javascript"
},
//
// 控制何时自动保存已更新文件
// 接受的值: "off"、"afterDelay"、"onFocusChange" (编辑器失去焦点)、"onWindowChange" (窗口失去焦点)
// 如果设置为 "afterDelay",可在 "files.autoSaveDelay" 中配置延迟时间
"files.autoSave": "onFocusChange",
/** editor **/
"editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
"editor.fontSize": 12,
"editor.lineHeight": 24,
"editor.fontWeight": "500",
// 代码缩进修改成 2 个空格
"editor.tabSize": 2,
// 100 列后换行
"editor.wordWrap": "on",
// "editor.wordWrapColumn": 100,
// 保存时格式化
"editor.formatOnSave": true,
// 显示 markdown 中英文切换时产生的特殊字符
"editor.renderControlCharacters": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
// 右侧小地图
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 60,
/** eslint and prettier **/
// 使用 eslint 風格使用standard 進行代碼規則限制
"eslint.autoFixOnSave": true,
// eslint 检测文件类型,针对 vue 文件 和 html 文件
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "js",
"autoFix": true
},
],
/** prettier **/
// prettier 设置语句末尾不加分号
"prettier.semi": true,
// prettier 设置强制单引号
"prettier.singleQuote": true,
/** 面包屑 **/
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// 启用后,按下 TAB 键,将展开 Emmet 缩写。
"emmet.triggerExpansionOnTab": true,
/** 主題 **/
"workbench.colorTheme": "Monokai",
// 左側工具欄是否可見
"workbench.activityBar.visible": true,
//自动保存信息
// By default, create file username
"fileheader.Author": "芮正云 16396@etransfar.com",
// By default, update file username.
"fileheader.LastModifiedBy": "芮正云 16396@etransfar.com",
// By default, common template. Do not modify it!!!!!
"fileheader.tpl": "/**\r\n * @创建码农: {author}\n * @创建日期: {createTime}\n * @最近更新: {lastModifiedBy}\n * @更新时间: {updateTime}\n * @文件描述: \n */\n",
/** js **/
// js設置單引號
"javascript.preferences.quoteStyle": "single",
// 让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
/** vue **/
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "js-beautify-html",
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false
}
},
/** stylus **/
// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"[markdown]": {
"editor.defaultFormatter": "yzhang.markdown-all-in-one"
} // 两个选择器中是否换行
}