俗话说得好,工欲善其事必先利其器,要想工作效率高,码代码的工具用的好是必须的,这里主要说一下 Mac 上 VScode 的快捷键,帮助大家快速搭建良好的开发工具。
使用 cmd+shift+P
所有所有打开用户设置,在设置的 json 中修改编辑器内置的格式,以下是个人的一些修改,其中包括一些 eslint、prettier、vetur 和编辑器的设置,不喜欢的可以自行 google 或者 百度。
{
// 缩进2个空格
"editor.tabSize": 2,
// - 不应该作为单词的分隔符
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
// 控制是否在键入时自动显示建议
"editor.quickSuggestions": {
"strings": true
},
// 每次保存的时候将代码按 eslint 格式进行修复,前提是项目下有 ESlint
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"eslint.options": {
"plugins": ["html"]
},
// 让 prettier 使用 eslint 的代码格式进行校验
"prettier.eslintIntegration": false,
// 结尾必须添加分号
"prettier.semi": true,
// 使用单引号
"prettier.singleQuote": true,
// 使用tab自动变为2个空格
"prettier.tabWidth": 2,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// vue组件中html代码格式化样式 force-aligned
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 130,
"singleQuote": true
}
}
}
学会了快捷键,有的时候都可以不用鼠标进行编码,我感觉懂 vim 的大神应该会有这种体验,所以懂编辑器的快捷键尤为重要。
以下介绍一些常用到的快捷键。
如果大家还有平时用到的功能或者快捷键,可以提高编码效率的,欢迎大家在评论中指出,我会添加进来。