华为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 回退
vue VSCode 开发设置（html自动补全、eslint保存时格式化、vetur 格式化html）
File - Preference - Setting -搜索setting.json - Edit in settings.json
settings.json
方法1：File - Preference - Setting -搜索setting.json - Edit in settings.json
settings.json
Setting.json
方法2：File - Preference - 搜索框输入：files.autoSave
之后能看到 files.autoSave 的可选项有
off : 关闭自动保存（默认）
afterDelay: 延迟xx时间后保存，可在 "files.autoSaveDelay" 中配置延迟时间；
onFocusChange: 编辑器失去焦点时自动保存；
onWindowChange: 窗口失去焦点时(编辑器窗口的切换，桌面窗口的切换)自动保存；
安装 ESLint
vscode 中安装 ESLint 插件
然后配置 vscode 的 setting.json
File - Preference - User Snippers
vue.json文件，然后添加下面模板
然后新建.vue文件 ，写下vue然后Tap键就能生成什么的模板。
如果没有生成模板只是多了个空格或者生成的是vue标签的话，我们还得设置一下，打开settings.json，添加下面的设置
如果你的Setting.json文件有 "files.associations" 设置的话，请删除，因为他会和上面 emmet.syntaxProfiles 冲突。
files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全，如果是要用.vue模板补全功能的话，html标签补全我们就用 emmet.syntaxProfiles 来设置。
vue 的开发中 vscode 可装用于开发规范的插件有
Prettier ：规范js
ESLint: 规范js
Vuter: 规范 .vue 文件中 template
stylus: 规范 stylus
注意：以下配置是基于接下来介绍的插件设置的，如果没有安装插件是不会生效的。
或者：
其中：
4.如果使用了stylus，那么vscode安装stylus插件，进行设置，不适用冒号双引号大括号
根目录下创建eslint规则文件 .eslintrc.js
（下面browsers 多了s 正确的为 browser ）
vue-cli3携手rollup、github-actions打造自动部署的vue组件模板（使用篇）
旨在让开发者在开发时拥有
的一条龙服务。(接下来，我们携手...)
假设 项目经理提了个 需求 ：要开发一个组件，名叫 chaste-component。
准备工作
准备工作完毕
打包
默认使用package.json的name打包
构建出了预发布文件
只需关注src文件内的组件开发，开发完成就可以
发布组件了（有特殊需求配置的除外）
运行
监听src文件变动，热更新
新开一个终端
运行在8080端口， 打开
Home 页面
上手 页面
页面基础内容也是自动生成的，只需要对docs-src/views文件的组件示例做调整
支持eslint风格检查及自动格式化，在 ctrl+s 保存的时候自动格式化，没用过格式化的都说直接 飞起来了
eslint风格检查
需要插件 eslint、babel-eslint、eslint-plugin-vue 及配置文件 .eslintrc.js 的支持，这些都已经做好了
自动格式化
需要编辑器设置的支持，这里在 .vscode/settings.json 文件配置好了
2019年11月github正式开放了github-actions，感动！
这里我们只介绍怎么用她完成demo自动构建，想要更多了解的可以看看阮一峰老师的这篇文章 GitHub Actions 入门教程
添加密钥并提交项目
然后提交项目到chaste-component仓库
github pages
设置source为gh-pages分支
打开 ，就进入了demo页面
之后 chaste-component 项目的每次提交都回自动更新demo
已配置的 workflows/ci.yml 如下
下一篇博客将分享 vue-cli3携手rollup、github-actions打造自动部署的vue组件模板（搭建篇）
github地址 （觉得有帮助，欢迎star）
vscode中打尖括号出现组件模板结构是哪个插件
安装vscode的插件：Vue VSCode Snippets
二、我这里默认显示是HTML代码，改成“自动检测”还是会在vue文件里面显示HTML（这个先不管）
重点：我们手动点击这里，把它设置为vue
三、开始写vb，就会有提示，我们选择第一个vbase，就会弹出vue模板了。
就不用辛辛苦苦手敲一个了…
百度看到有配置一大堆东西的，我都懵了，还好发现了这个方法。
结果如下图噢：
vue.js
vscode
VSCode调试vue项目
先决条件
你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。
在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。
打开 config/index.js 并找到 devtool 属性。将其更新为：
如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性：
进入Debugger视图，添加Chrome配置，将内容替换成以下内容
设置断点
此处response返回数据
启动调试
在终端使用如下命令开启这个应用
进入Debug视图，选择‘vuejs:chrome’配置，然后按F5或点击绿色的play按钮
随着一个新的 Chrome 实例打开 ，你的断点现在应该被命中了。
如何优雅地使用 VSCode 来编辑 vue 文件
不可能，目前暂无一个软件能取代 LaTeX 排版之王的地位。当然，LaTeX 的模式并不是每个人都喜闻乐见的。在加之微软统治下的用户恶习，使得大家更倾向于 Word 的使用。又，题主将 Word 与 LaTeX 类比，显然和论文排版有关。
