网站构成要素,wordpress 云主机名,网站搭建设计课程报告,网站开发维护需要哪些岗位1、统计代码行数
使用场景是项目年终统计行数。
实现#xff1a;在需要统计得文件夹右键“在文件夹中查找“ #xff0c;后输入筛选得正则表达式 ^b*[^:b#/].*$
(注意右边小图标都点亮) 这里顺便将自己使用vscode进行前端开发环境配置归纳一下#xff0c;便于自己以后快速…1、统计代码行数
使用场景是项目年终统计行数。
实现在需要统计得文件夹右键“在文件夹中查找“ 后输入筛选得正则表达式 ^b*[^:b#/].*$
(注意右边小图标都点亮) 这里顺便将自己使用vscode进行前端开发环境配置归纳一下便于自己以后快速搭建
vscode是微软开发的的一款代码编辑器就如官网上说的一样vscode重新定义redefined了代码编辑器。当前市面上常用的轻型代码编辑器主要是sublimenotepadeditplusatom这几种。比起notepad、editplusvscode集成了许多IDE才具有的功能比起它们更像一个代码编辑器比起sublimevscode颜值更高安装配置插件更为方便比起atomvscode启动速度更快打开各种大文件不卡。可以说vscode既拥有高自由度、又拥有高性能和高颜值最关键的是vscode还是一款免费并且有团队持续快速更新的代码编辑器。可以说vscode是代码编辑器的首选。个人推荐编写前端代码时代码编辑器选择vscodeIDE选择WebStorm。
根据个人爱好和习惯选择代码编辑器。
个人现在基本选择notepad/editplus进行代码临时查看用vscode编码 2、安装vscode
百度网盘下载https://pan.baidu.com/s/1ovLRROX0g-6Nm4pOQgRDGQ 3、安装插件 vscode开发需要安装常用的插件提供编码或调试辅助下图是我选择安装的插件扩展 Auto Close Tag - 自动闭合HTML/XML标签
Auto Rename Tag - 自动完成另一侧标签的同步修改
Beautify - 格式化代码F1快捷键选择格式化CSS/ html / js
Bracket Pair Colorizer - 给括号加上不同的颜色便于区分不同的区块使用者可以定义不同括号类型和不同颜色
Debugger for Chrome - 映射vscode上的断点到chrome上方便调试
HTML CSS Support - 智能提示CSS类名以及id
HTML Snippets - 智能提示HTML标签以及标签含义类似有JavaScript(ES6) code snippets、还有jQuery、vue、react等语言或框架的代码智能提示
open in browser - 而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件支持自定义打开指定的浏览器包括FirefoxChromeOperaIE以及Safari
Path Intellisense - 自动提示文件路径支持各种快速引入文件
Vetur - Vue多功能集成插件包括语法高亮智能提示emmet错误提示格式化自动补全debugger。vscode官方钦定Vue插件Vue开发者必备。
filesize - 在底部状态栏显示当前文件大小点击后还可以看到详细创建、修改时间
vscode-icon - 让 vscode 资源树目录加
quokka - 一个调试工具插件能够根据你正在编写的代码提供实时反馈。它易于配置并能够预览变量的函数和计算值结果。另外在使用 JSX 或 TypeScript 项目中它能够开箱即用
CSS Peek - 以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时选择“ Go to Definition 和 Peek definition ”选项它便会给你发送样式设置的 CSS 代码
HTML Boilerplate - 让 vscode 资源树目录加
Icon Fonts - 这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons
Prettier - 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件它就能够自动应用Prettier并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。
Color Info - 提供你在 CSS中使用颜色的相关信息。你只需在颜色上悬停光标就可以预览色块中色彩模型的HEX、 RGB、HSL 和 CMYK相关信息了。
Minify - 这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier与 JavaScript、CSS 和 HTML 协同工作。使用F1 运行文件缩小器Minify
Element-Helper - 支持element-ui 标签
svg-viewer - 支持svg预览 4、自定义配置
可以在“文件-首选项-设置”的“用户设置”里添加
也可以通过 “CtrlShiftP” 打开命令面板输入settings选择进行用户自定义设置
配置文件
{// tab长度editor.tabSize: 2,// 启用后将在保存文件时剪裁尾随空格。files.trimTrailingWhitespace: true,// Git 可执行文件路径git.path: C:/Program Files (x86)/Git/bin/git.exe,workbench.iconTheme: vscode-icons,// 以像素为单位控制字号。editor.fontSize: 19,//文件切换到别的页面时候自动保存files.autoSave: onFocusChange,editor.wordWrap: on,// 在 editor.wordWrap 为 wordWrapColumn 或 bounded 时控制编辑器列的换行。editor.wordWrapColumn: 0,emmet.syntaxProfiles: {vue-html: html,vue: html
},
editor.quickSuggestions: {strings: true
}
} 5、快捷键使用 主命令框
F1 或 CtrlShiftP: 打开命令面板。在打开的输入框内可以输入任何命令例如
按一下 Backspace 会进入到 CtrlP 模式在 CtrlP 下输入 可以进入 CtrlShiftP 模式
在 CtrlP 窗口下还可以:
直接输入文件名跳转到文件? 列出当前可执行的动作! 显示 Errors或 Warnings也可以 CtrlShiftM: 跳转到行数也可以 CtrlG 直接进入 跳转到 symbol搜索变量或者函数也可以 CtrlShiftO 直接进入 根据分类跳转 symbol查找属性或函数也可以 CtrlShiftO 后输入:进入# 根据名字查找 symbol也可以 CtrlT编辑器与窗口管理
打开一个新窗口 CtrlShiftN关闭窗口 CtrlShiftW同时打开多个编辑器查看多个文件新建文件 CtrlN文件之间切换 CtrlTab切出一个新的编辑器最多 3 个 Ctrl\也可以按住 Ctrl 鼠标点击 Explorer 里的文件名左中右 3 个编辑器的快捷键 Ctrl1 Ctrl2 Ctrl33 个编辑器之间循环切换 Ctrl编辑器换位置 Ctrlk然后按 Left或 Right代码编辑
代码行缩进 Ctrl[ 、 Ctrl]CtrlC 、 CtrlV 复制或剪切当前行/当前选中内容代码格式化 ShiftAltF或 CtrlShiftP 后输入 format code上下移动一行 AltUp 或 AltDown向上向下复制一行 ShiftAltUp 或 ShiftAltDown在当前行下边插入一行 CtrlEnter在当前行上方插入一行 CtrlShiftEnter
光标相关
移动到行首 Home移动到行尾 End移动到文件结尾 CtrlEnd移动到文件开头 CtrlHome移动到定义处 F12定义处缩略图只看一眼而不跳转过去 AltF12移动到后半个括号 CtrlShift]选择从光标到行尾 ShiftEnd选择从行首到光标处 ShiftHome删除光标右侧的所有字 CtrlDelete扩展/缩小选取范围 ShiftAltLeft 和 ShiftAltRight多行编辑(列编辑)AltShift鼠标左键CtrlAltDown/Up同时选中所有匹配 CtrlShiftLCtrlD 下一个匹配的也被选中 (在 sublime 中是删除当前行后面自定义快键键中设置与 CtrlShiftK 互换了)回退上一个光标操作 CtrlU
重构代码
找到所有的引用 ShiftF12同时修改本文件中所有匹配的 CtrlF12重命名比如要修改一个方法名可以选中后按 F2输入新的名字回车会发现所有的文件都修改了跳转到下一个 Error 或 Warning当有多个错误时可以按 F8 逐个跳转查看 diff 在 explorer 里选择文件右键 Set file to compare然后需要对比的文件上右键选择 Compare with file_name_you_chose
查找替换
查找 CtrlF查找替换 CtrlH整个文件夹中查找 CtrlShiftF
显示相关
全屏F11zoomIn/zoomOutCtrl /-侧边栏显/隐CtrlB显示资源管理器 CtrlShiftE显示搜索 CtrlShiftF显示 Git CtrlShiftG显示 Debug CtrlShiftD显示 Output CtrlShiftU
其他
自动保存File - AutoSave 或者 CtrlShiftP输入 auto修改默认快捷键
打开默认键盘快捷方式设置File - Preferences - Keyboard Shortcuts或者AltF - p - k
修改 keybindings.json
// Place your key bindings in this file to overwrite the defaults
[// ctrlspace 被切换输入法快捷键占用{key: ctrlaltspace,command: editor.action.triggerSuggest,when: editorTextFocus},// ctrld 删除一行{key: ctrld,command: editor.action.deleteLines,when: editorTextFocus},// 与删除一行的快捷键互换{key: ctrlshiftk,command: editor.action.addSelectionToNextFindMatch,when: editorFocus},// ctrlshift/多行注释{key:ctrlshift/,command: editor.action.blockComment,when: editorTextFocus},// 定制与 sublime 相同的大小写转换快捷键需安装 TextTransform 插件{key: ctrlk ctrlu,command: uppercase,when: editorTextFocus},{key: ctrlk ctrll,command: lowercase,when: editorTextFocus}
] 参考学习
https://lzw.me/a/vscode-visual-studio-code-shortcut.html
