华为padvscode配置
华为padvscode配置
想要优雅且高效的编写代码，必须熟练使用一款前端开发工具。但前端开发工具数不胜数，像HBuilder、Sublime Text、WebStorm、Visual Studio Code......等等,其中VSCode以其轻量且强大的代码编辑功能和丰富的插件生态系统，独受前端工师的青睐。网上有很多vscode的配置以及使用博客，但都没有本篇那么详细且全面。
软件下载
直接在官网进行下载
Visual Studio Code - Code Editing. Redefined
最近很多人留言说官网下载被限速，如果大家存在这种情况，可以在“前端码头”后台发送vscode获取软件包。
首页
vscode设置成中文
vscode默认的语言是英文，对于英文不好的小伙伴可能不太友好。简单几步教大家如何将vscode设置成中文。
按快捷键“Ctrl+Shift+P”。
在“vscode”顶部会出现一个搜索框。
输入“configure language”，然后回车。
“vscode”里面就会打开一个语言配置文件。
将“en-us”修改成“zh-cn”。
按“Ctrl+S”保存设置。
关闭“vscode”，再次打开就可以看到中文界面了。
当然如果你不愿意设置，也可以直接安装它的中文插件，还是很人性化的。
VScode用户设置
1. 打开设置
文件--首选项--设置，打开用户设置。VScode支持选择配置，也支持编辑setting.json文件修改默认配置。个人更倾向于编写json的方式进行配置，下面会附上我个人的配置代码
这里解析几个常用配置项：
（1）editor.fontsize用来设置字体大小，可以设置editor.fontsize : 14;
（2）files.autoSave这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。
（3）editor.tabCompletion用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为on;
（4）editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，推荐设置为true,即"editor.codeActionsOnSave": { "source.organizeImports": true }；
（5）editor.lineNumbers设置代码行号,即editor.lineNumbers ：true；
我的个人配置，供参考：
{ "files.associations": { "*.vue": "vue", "*.wpy": "vue", "*.wxml": "html", "*.wxss": "css" }, "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", "git.enableSmartCommit": true, "git.autofetch": true, "emmet.triggerExpansionOnTab": true, "emmet.showAbbreviationSuggestions": true, "emmet.showExpandedAbbreviation": "always", "emmet.includeLanguages": { "vue-html": "html", "vue": "html", "wpy": "html" }, //主题颜色 //"workbench.colorTheme": "Monokai", "git.confirmSync": false, "explorer.confirmDelete": false, "editor.fontSize": 14, "window.zoomLevel": 1, "editor.wordWrap": "on", "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, //失去焦点后自动保存 "files.autoSave": "onFocusChange", // #值设置为true时，每次保存的时候自动格式化； "editor.formatOnSave": false, //每120行就显示一条线 "editor.rulers": [ ], // 在使用搜索功能时，将这些文件夹/文件排除在外 "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/target": true, "**/logs": true, }, // 这些文件将不会显示在工作空间中 "files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, "**/*.js": { "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中 }, "**/node_modules": true }, // #让vue中的js按"prettier"格式进行格式化 "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // #vue组件中html代码格式化样式 "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样 "wrap_line_length": 200, "end_with_newline": false, "semi": false, "singleQuote": true }, "prettier": { "semi": false, "singleQuote": true } } }
最近经常有人微信问我，这个配置代码写在哪里？
新版的vscode设置默认为UI的设置，而非之前的json设置。如果你想复制我上面这段代码进行配置，可以进行下面的修改
文件首选项设置 搜索workbench.settings.editor，选中json即可改成json设置；
禁用自动更新
文件 首选项 设置（macOS：代码 首选项 设置，搜索update mode并将设置更改为none。
开启代码提示设置
第一步：点击左下角点击设置图标，找到并点击“setting”
第二步：到搜索框里搜索“prevent”---并取消此项的勾选
常用的快捷键
高效的使用vscode,记住一些常用的快捷键是必不可少的，我给大家罗列了一些日常工作过程中用的多的快捷键。
以下以Windows为主，windows的 Ctrl，mac下换成Command就行了
对于 行 的操作：
重开一行：光标在行尾的话，回车即可；不在行尾，ctrl + enter 向下重开一行；ctrl+shift + enter 则是在上一行重开一行
删除一行：光标没有选择内容时，ctrl + x 剪切一行；ctrl +shift + k 直接删除一行
移动一行：alt + ↑ 向上移动一行；alt + ↓ 向下移动一行
复制一行：shift + alt + ↓ 向下复制一行；shift + alt + ↑ 向上复制一行
ctrl + z 回退
vscode 配置
1.单行注释 ctrl+/ //注释
2.多行注释 alt+shift+a /**/注释
3.Alt + Click 插入光标-支持多个
4.终端打开方法
使用快捷键： ctrl + · 即可；注意那个点是键盘上 esc 下面的那 个；
或者：
选择vscode的 “查看”，然后选择“集成终端” ，打开即可；
5.左下角显示大纲（显示所有函数方法） Shift+Ctl+P - View: Quick Open View - 大纲
6.编写并实时预览Markdown 先按Ctrl + K，然后放掉，紧接着再按 v，也能调出实时预览框
1.Beautify 插件配置
在VSCode的配置文件里添加 editor.formatOnSave:true 即可实现保存时自动格式化
VSCode格式化laravel的blade文件
2.KoroFileHeader插件配置
自动生成文件头部注释和函数注释
3.DocBlocker插件
PHP注释
VSCode 调试
更全面的信息可以参考官方 调试手册 ，以下记录我用 VSCode 调试的一些经验。
想要在 VSCode 里调试，需要配置两个文件 tasks.json 和 launch.json 。
这两个文件按 F5 后会自动在 .vscode 目录下生成。
一般默认生成的 tasks.json 文件如下：
我们需要关注的选项有：
深入理解 tasks.json 文件的作用与 "command" 选项的用法，我们就能灵活地配置构建工程。
tasks.json 文件是用来构建工程的，当我们按 F5 进行调试时，VSCode 首先会执行 tasks.json 文件里 "command" 选项后的命令，并传入 "args" 参数，这样整个工程就被重新编译链接一遍了。
以 hello.c 文件和上述 tasks.json 为例，按 F5 进行调试时，最终会在命令行执行下述命令构建工程：
当然，如果一个工程有多个文件，"command" 就不能是简单的 gcc 了，需要根据实际的构建系统选择。
如果构建系统使用的是 Makefile ，那我们可以配置
这样在构建项目时就会使用命令
这跟我们平时使用 make 构建项目是一致的。
又比如配置 Zephyr 环境，
这样在构建项目时相当于执行命令
launch.json 文件用于配置调试环境。一般默认生成的文件如下：
我们需要关注的选项有：
VSCode 预定义了一些变量，可以在 Variables Reference 查看意思。
有时候我们的程序需要访问硬件资源，这一般需要 root 权限，而 VSCode 一般是在用户权限下启动的，这就需要特殊配置 VSCode 才能调试程序。
下面介绍如何利用 VSCode 以 root 权限调试程序。
首先需要注意到 launch.json 文件里的 "miDebuggerPath" 这个选项，它是调试器的路径，如果这个调试器可以以 root 权限运行，那么就达成了我们的目的了。
在 /home/user_name 目录下创建文件 gdb，user_name 需要替换为实际的用户名。
然后编辑该文件 vim gdb ，加入下述内容：
给 gdb 添加执行权限，
在修改 "miDebuggerPath" 成为
即可。这样我们就可以在 VSCode 里以 root 权限调试程序了，只不过每次都需要输入密码，因为有一个 sudo 过程。
为了解决这个麻烦，我又在网上找到了方法，将 /home/user_name/gdb 加入 sudo 的免密认证即可。
输入
编辑 /etc/sudoers 文件，修改成下述内容即可，
其中 jackis 是我的用户名，需要根据实际用户名替换。
NOPASSWD: 后的命令 sudo 时都不需要密码。退出 Shell，再重新打开一个命令行界面，输入 sudo apt update ，会发现没有提示输入密码了。
参考：
How to debug programs with “sudo” in VSCODE
How to Run sudo Commands Without Password
