vscode使用技巧(2)
创始人
2024-06-02 12:56:14
0

在vscode中我们想要跳到函数定义的地方去,要装个插件,点击下面红色圈住的地方

在里面搜索插件来安装,输入我们要安装的插件,php IntelliSense,如下

安装好后,它会扫描我们的项目,如下

等它扫描完,我们就可以跳到函数的定义的地方去了,我们把鼠标放到我们要跳转的函数上面去,如下

把鼠标放到我们的函数上面,它会出现提示,显示函数的注释啥的,如上。

这个插件显示的信息不够详细,我们可以再来安装一个插件,如下 

安装好这个之后,再来把鼠标放到我们要跳转的函数,如下

这样提示就清晰多了,把鼠标放到上面去,然后鼠标往下滚,还可以还可用看到参数的详细信息,如下

 也可以顺便把php调试的插件的给装了,如下

 编辑器我们想换个主题,如下点击1再点击2,如下

 按上下方向键选择自己喜欢的主题

或者我们可以下载其他的主题,如下

跟下载插件一样,还是在那里搜索,我们就搜索“Atom One Light”,下载这个主题,或者我们搜索“Theme”,搜索其他的主题,如下

有那么多主题给我们下载呢,我们可以看这些主题有多少人下载来决定我们是否下载,如下

 下载好后,它会自动切换到该主题,如下

看,可以

我喜欢下面这种主题,如下

也就是我喜欢Material这个主题。

然后我们设置一下编辑器的高亮显示。

上面我们选择一个变量名的时候,其他同名的变量名的高亮不是很明显,我们想设置明显一点,比如黄色,怎么设置?如下

我们可以安装下面的插件来配置,如下

然后在这个插件的基础上配置,怎么配置,看这个插件的说明,如下

然后我们配置一下这个插件,如下

看看效果,如下

 这个不是很好用,我们用其他的,我们搜索“highlight”,如下

就装这个,这个多人用,如下

上面还有它的一些配置demo,然后我们配置一下,如下

有的是在这里配置,有的是在配置文件中配置,如下

点击它,就打开我们的编辑器的配置文件,如下

 

可以在里面配置我们的编辑器,有什么配置呢?可以参考下面的配置demo,如下

{ "editor.renderIndentGuides": false,"carbon.backgroundColor": "rgba(0,0,0,0)","carbon.theme": "oceanic-next","window.menuBarVisibility": "visible","path-intellisense.mappings": {"themes": "${workspaceRoot}/src/themes","components": "${workspaceRoot}/src/components","utils": "${workspaceRoot}/src/utils","config": "${workspaceRoot}/src/config","storage": "${workspaceRoot}/src/storage","style": "${workspaceRoot}/src/style","enums": "${workspaceRoot}/src/enums","services": "${workspaceRoot}/src/services","models": "${workspaceRoot}/src/models","extends": "${workspaceRoot}/src/extends","assets": "${workspaceRoot}/src/assets"},"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// VScode主题配置"editor.tabSize": 2,"editor.lineHeight": 24,"editor.renderLineHighlight": "none","editor.renderWhitespace": "none",// "editor.fontFamily": "Consolas","editor.fontSize": 16,"editor.cursorBlinking": "smooth","editor.formatOnSave": false,"editor.snippetSuggestions": "top","editor.wordWrapColumn": 200,"editor.quickSuggestions": {"other": true,"comments": true,"strings": false},"editor.tokenColorCustomizations": {"comments": "#4d535a", // 注释"keywords": "#0a0", // 关键字"variables": "#f00", // 变量名"strings": "#e2d75dbd", // 字符串"functions": "#5b99fcc9", // 函数名"numbers": "#AE81FF" // 数字},// 自动换行"editor.wordWrap": "on","javascript.suggestionActions.enabled": false,"javascript.updateImportsOnFileMove.enabled": "always","javascript.implicitProjectConfig.experimentalDecorators": true,// 安装了tslint插件后,是否启用该插件"typescript.validate.enable": false,"workbench.iconTheme": null,"workbench.startupEditor": "newUntitledFile","workbench.colorTheme": "Monokai Dimmed","workbench.colorCustomizations": {// 设置guide线高亮颜色"editorIndentGuide.activeBackground": "#ff0000"},// 启用/禁用导航路径"breadcrumbs.enabled": true,"minapp-vscode.disableAutoConfig": true,"open-in-browser.default": "chrome",// VScode 文件搜索区域配置"search.exclude": {"**/dist": true,"**/build": true,"**/elehukouben": true,"**/.git": true,"**/.gitignore": true,"**/.svn": true,"**/.DS_Store": true,"**/.idea": true,"**/.vscode": false,"**/yarn.lock": true,"**/tmp": true},// 配置文件关联"files.associations": {// "*.vue": "html","*.wxss": "css","*.cjson": "jsonc","*.wxs": "javascript"},// 配置emmet是否启用tab展开缩写"emmet.triggerExpansionOnTab": true,// 配置emmet对文件类型的支持"emmet.syntaxProfiles": {"vue-html": "html","vue": "html","javascript": "javascriptreact","xml": {"attr_quotes": "single"}},// 在react的jsx中添加对emmet的支持"emmet.includeLanguages": {"jsx-sublime-babel-tags": "javascriptreact","wxml": "html"},"emmet.showSuggestionsAsSnippets": true,"vetur.format.defaultFormatter.js": "vscode-typescript",
}

 比如我们想我们的代码中如果出现了“NOTE:”,我们就设置它高亮,高亮的样式如下设置,如下

 

1表示我们设置高亮的字符串,2是设置的字体颜色,3设置的是背景颜色,然后我们看看我们代码中的NOTE:,看看有没有高亮,如下

看,高亮了,就是我们设置的高亮样式,如果我们还想设置一下其他字符串的高亮,如下

上面我们设置的是“TODO:”这个字符串的高亮样式,然后我们在代码中输入“NOTE:”看看,如下

看,是我们设置的高亮样式 

 我们的函数里面有return,为了方便我们看到每个函数return的东西,我们也可以给“return”这个字符串设置高亮,如下

然后我们看看效果,看看我们代码中的每个“return”是不是都是我们设置好的高亮样式了,如下

看,是的,方便我们看到每个函数的返回值了,哈哈哈 

但是我们想要设置选中的字符串的高亮样式,怎么做?

主要设置上面红色圈住的配置,即如下

{"editor.suggestSelection": "first","vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue","window.openFilesInNewWindow": "on","workbench.colorTheme": "Material","workbench.colorCustomizations": {"editor.selectionHighlightBackground": "#ffff00","editor.selectionBackground": "#ffff00",},"workbench.iconTheme": "vscode-icons","todohighlight.keywords": ["DEBUG:","REVIEW:",{"text": "NOTE:","color": "#ff0000","backgroundColor": "yellow","overviewRulerColor": "grey"},{"text": "HACK:","color": "#000","isWholeLine": false,},{"text": "TODO:","color": "red","border": "1px solid red","borderRadius": "2px", //NOTE: using borderRadius along with `border` or you will see nothing change"backgroundColor": "rgba(0,0,0,.2)",//other styling properties goes here ... }],
}

效果如下

可以,但是这样看我不知道我选中的是哪个self了,我们配置一下editor.selectionBackground,设置我们选中的文本样式,我们设置为红色,如下 

再来看看效果,如下

 上面红色划住的就是我们选择的“self”

我们还想设置其他样式呢?比如“editor”相关的,我们输入“editor”,有提示的,如下

有这么多关于“editor”的设置呢

或者你下载其他主题,然后到插件目录中,找到它们的配置文件,如下

 

我们就找上面那个“theme-monokai”,进去看看它的配置文件,如下

打开看看,如下

有这么多配置,然后我们把鼠标放上去,有这些配置的说明的,即配置的是什么,如下

看,有配置说明

更多配置如下

{ // VScode主题配置"editor.tabSize": 2,"editor.lineHeight": 24,"editor.renderLineHighlight": "none","editor.renderWhitespace": "none","editor.fontFamily": "Consolas","editor.fontSize": 15,"editor.cursorBlinking": "smooth","editor.multiCursorModifier": "ctrlCmd","editor.snippetSuggestions": "top",// 使用vscode的自动格式化时,有时会把一行过长的代码折行。400表示400个字符处折行"editor.wordWrapColumn": 400,"editor.wordWrap": "off","editor.quickSuggestions": {"other": true,"comments": true,"strings": false},"editor.codeActionsOnSave": {"source.organizeImport": true},// 保存文件时,自动格式化"editor.formatOnSave": false,// 格式化粘贴到文件内的内容"editor.formatOnPaste": false,"terminal.integrated.shell.windows": "C:\\windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe","javascript.suggestionActions.enabled": false,"javascript.updateImportsOnFileMove.enabled": "always","javascript.implicitProjectConfig.experimentalDecorators": true,"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"workbench.iconTheme": "vscode-great-icons","workbench.startupEditor": "newUntitledFile","workbench.colorTheme": "Dracula Soft","workbench.colorCustomizations": {// 设置guide线高亮颜色"editorIndentGuide.activeBackground": "#ff0000"},// css2rem插件配置:设置书写css时,px自动提示转换为rem的根字体大小,默认值为16"cssrem.rootFontSize":100,// 启用/禁用导航路径"breadcrumbs.enabled": true,// 通过默认浏览器打开html文件"open-in-browser.default": "chrome",// VScode进行文件搜索时,不搜索这些区域。注意:vs已经贴心的默认设置了 node_modules 和 bower_components 文件夹"search.exclude": {"**/.git": true,"**/.gitignore": true,"**/.svn": true,"**/.DS_Store": true,"**/.idea": true,"**/.vscode": false,"**/yarn.lock": true,"**/tmp": true,"**/dist": true,"**/build": true,},// 配置文件关联// 比如小程序中的 .wxss 这种文件,会把它作为css文件来处理,提供对应的css的语法提示,css的格式化等等。"files.associations": {"*.wxss": "css","*.cjson": "jsonc","*.wxs": "javascript","*.ts": "typescript","*.vue": "vue","*.dart": "dart"},// vscode已经内置了emmet。配置emmet是否启用tab展开缩写// 这一设置最大作用是:当输入的文本不属于Emmet定义的缩写规则时,依然允许使用Tab键进行缩进。此时会提示我自定义的缩写语句,以及各插件自定义的缩写语句."emmet.triggerExpansionOnTab": true,"emmet.showSuggestionsAsSnippets": true,// 配置emmet对哪种文件类型支持"emmet.syntaxProfiles": {"vue-html": "html","vue": "html","javascript": "javascriptreact","xml": {"attr_quotes": "single"}},// 在 react 的jsx中添加对emmet的支持"emmet.includeLanguages": {"jsx-sublime-babel-tags": "javascriptreact","wxml": "html"},// 格式化快捷键 shirt+alt+F,有时可能需要多按几次// 因为使用 shirt+alt+F进行格式化时,先执行编辑器的格式化规则,然后才会按照eslint和tslit这样的其他插件去格式化。// 是否开启eslint检测"eslint.enable": true,// 是否启用根据eslint配置文件。文件保存时,根据配置文件进行格式化"eslint.autoFixOnSave": true,// eslint配置文件 ,修改为你自己电脑上的文件位置,或者直接删除"eslint.options": {"configFile": "D:/worksapce/youxiang-mobile-master/.eslintrc.js","plugins": ["html"]},"eslint.validate": ["javascript","javascriptreact",{"language": "html","autoFix": true},{"language": "vue","autoFix": true},"typescript","typescriptreact"],// 安装了tslint插件后,是否启用该插件"typescript.validate.enable": false,// git是否启用自动拉取"git.autofetch": true,// 配置gitlen中git提交历史记录的信息显示情况"gitlens.advanced.messages": {"suppressCommitHasNoPreviousCommitWarning": false,"suppressCommitNotFoundWarning": false,"suppressFileNotUnderSourceControlWarning": false,"suppressGitVersionWarning": false,"suppressLineUncommittedWarning": false,"suppressNoRepositoryWarning": false,"suppressResultsExplorerNotice": false,"suppressShowKeyBindingsNotice": true,"suppressUpdateNotice": true,"suppressWelcomeNotice": false},// 是否格式化python文件"python.linting.enabled": false,// 设置端口。开启apicloud在vscode中的wifi真机同步"apicloud.port": "23450",// 设置apicloud在vscode中的wifi真机同步根目录,默认可不设置"apicloud.subdirectories": "/apicloudproject",// 这个设置是全局的,不可为每种语言配置。// 断点调试时,遇到断点,自动显示调试视图。"debug.openDebug": "openOnDebugBreak",// 专为dart语言配置"[dart]": {// snippet :代码片段// 保存文件时,是否自动格式化代码,"editor.formatOnSave": true,// 当你输入特定字符时,是否自动格式化代码,(比如输入 `;` 和 `}`)."editor.formatOnType": true,// 在80个字符处画一条引导线,这个范围内的dart代码将被格式化。"editor.rulers": [80],// 禁用与所选内容匹配的单词的内置突出显示。如果不这样做,所选文本的所有实例都将突出显示,从而影响Dart突出显示所选变量的精确引用的能力。"editor.selectionHighlight": false,// 默认情况下,当处于“代码片段模式”(在插入的代码中编辑占位符)时,VS会防止snippets弹出打开。// 如果设置为“false”,则表示允许完成操作打开,就像不在代码段占位符中"editor.suggest.snippetsPreventQuickSuggestions": true,// coding时,VScode会给我们给多提示,在所有的提示选项中会默认选中第一个,这一配置就是表示默认选中哪一项。// 默认值为:"first",表示VScode将总是选中第一项// (推介) "recentlyUsed" 表示vs code将从代码提示中,预先选中最近使用过的项,"editor.suggestSelection": "recentlyUsedByPrefix",// 允许使用按速写代码片段,例如,输入“for”时,即使完成列表不可见。"editor.tabCompletion": "onlySnippets",// 默认情况下,当前的语言没有代码片段提示时,VS Code将使用当前文件中的你自己写过的单词来显示代码片段提示。// 这导致代码完成在编辑注释和字符串时建议单词。 此设置将阻止这种情况// 对于dart来说最好关闭,对于html和css建议开启        "editor.wordBasedSuggestions": false,// 在文件底部添加新代码行时,强制所有文件都有一行空格。"files.insertFinalNewline": true,}
}

还有如下

{// 是否允许自定义的snippet片段提示"editor.snippetSuggestions": "top",// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// #每次保存的时候自动格式化 "editor.formatOnSave": false,// #每次保存的时候将代码按eslint格式进行修复"eslint.autoFixOnSave": true,"editor.fontWeight": "400","editor.formatOnType": false,"workbench.iconTheme": "material-icon-theme","git.confirmSync": false,"team.showWelcomeMessage": false,"window.zoomLevel": 0,"editor.renderWhitespace": "boundary","editor.cursorBlinking": "smooth","editor.minimap.enabled": true,"editor.minimap.renderCharacters": false,"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}","editor.codeLens": true,//eslint 代码自动检查相关配置"eslint.enable": true,"eslint.run": "onType","eslint.options": {"extensions": [".js",".vue"]},// 添加 vue 支持"eslint.validate": ["javascriptreact","vue","javascript",{"language": "vue","autoFix": true},"html",{"language": "html","autoFix": true}],//  #让prettier使用eslint的代码格式进行校验 "prettier.eslintIntegration": true,//  #去掉代码结尾的分号 "prettier.semi": false,//  #使用带引号替代双引号 "prettier.singleQuote": true,//  #让函数(名)和后面的括号之间加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html",// #让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript","explorer.confirmDelete": false,"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "force-aligned"// #vue组件中html代码格式化样式}},// 格式化stylus, 需安装Manta's Stylus Supremacy插件"stylusSupremacy.insertColons": false, // 是否插入冒号"stylusSupremacy.insertSemicolons": false, // 是否插入分好"stylusSupremacy.insertBraces": false, // 是否插入大括号"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行"stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行"files.associations": {"*.cjson": "jsonc","*.wxss": "css","*.wxs": "javascript"},"emmet.includeLanguages": {"wxml": "html"},"minapp-vscode.disableAutoConfig": true,"window.menuBarVisibility": "visible","git.enableSmartCommit": true,"git.autofetch": true,"liveServer.settings.donotShowInfoMsg": true,"[html]": {"editor.defaultFormatter": "vscode.html-language-features"},"javascript.updateImportsOnFileMove.enabled": "always","workbench.colorTheme": "SynthWave '84","editor.fontSize": 18,"search.followSymlinks": false,"workbench.sideBar.location": "right","vscode_custom_css.policy": true,"vscode_custom_css.imports": ["file:///C:/Users/wongseedling/Desktop/vscode-transparent-glow/synthwave84.css","file:///C:/Users/wongseedling/Desktop/vscode-transparent-glow/toolbar.css","file:///C:/Users/wongseedling/Desktop/vscode-transparent-glow/vscode-vibrancy-style.css","file:///C:/Users/wongseedling/Desktop/vscode-transparent-glow/enable-electron-vibrancy.js",],// 高亮的颜色,emm暂时只支持这样写"wxmlConfig.activeColor": {"color": "#e5c07b"},// 是否禁用高亮组件"wxmlConfig.activeDisable": false,// 是否开启保存自动格式化"wxmlConfig.onSaveFormat": false,"wxmlConfig.format": {"brace_style": "collapse","end_with_newline": false,"indent_char": "","indent_handlebars": false,"indent_inner_html": false,"indent_scripts": "keep","indent_size": 2,"indent_with_tabs": true,"max_preserve_newlines": 1,"preserve_newlines": true,"wrap_attributes": "force-expand-multiline"},// 高亮所忽略的组件数组"wxmlConfig.tagNoActiveArr": ["view","button","text","icon","image","navigator","block","input","template","form","camera","textarea"],"zenMode.restore": true,"breadcrumbs.enabled": true,"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe","[wxml]": {"editor.defaultFormatter": "qiu8310.minapp-vscode"},"gitlens.advanced.messages": {"suppressLineUncommittedWarning": true},"javascript.format.placeOpenBraceOnNewLineForControlBlocks": true,"editor.formatOnPaste": false,"vsicons.presets.hideFolders": true,"editor.cursorStyle": "line-thin"
}

相关内容

热门资讯

我的心儿怦怦跳小学生作文【优... 我的心儿怦怦跳小学生作文 篇一我的心儿怦怦跳今天,我要给大家讲一个有关我的心情的故事。故事的主人公是...
走进医院小学作文【优秀3篇】 走进医院小学作文 篇一医院小学是一所特殊的学校,它位于医院内,为住院的患儿提供教育服务。我有幸参观了...
父母的爱小学作文700字【实... 父母的爱小学作文700字 篇一父母的爱父母是孩子一生中最重要的人,他们的爱无处不在。我有一个特别疼爱...
美丽的秋天树叶小学作文【精彩... 美丽的秋天树叶小学作文 篇一秋天来了,大地变得金黄了起来。走在树林里,你会看到树叶一个个像小精灵一样...
买菜小学作文【优质6篇】 买菜小学作文 篇一我喜欢去菜市场买菜我家离菜市场很近,所以每次我都会去买菜。我喜欢去菜市场买菜的原因...
逛书店的作文(最新3篇) 逛书店的作文 篇一逛书店的作文近年来,随着电子书的兴起,逛书店的人似乎越来越少了。然而,对我来说,逛...
心儿怦怦跳小学作文(最新6篇... 心儿怦怦跳小学作文 篇一心儿怦怦跳我是一颗小小的心儿,每天都在孩子们的胸腔中怦怦跳动。当孩子们快乐时...
大力士小学作文(优选6篇) 大力士小学作文 篇一我的偶像我有一个偶像,他就是大力士先生。大力士先生是我们学校的保安,他不仅身手敏...
我的伙伴小学作文【精彩6篇】 我的伙伴小学作文 篇一 我的伙伴小学作文 篇二我的伙伴小学作文 篇三   一天,我在院子里玩耍,无意...
春节联欢晚会小学作文(通用6... 春节联欢晚会小学作文 篇一喜迎新春,迎接春节联欢晚会今年的春节联欢晚会真是精彩纷呈!我和家人一起坐在...
同一个屋檐下作文600字【精... 同一个屋檐下作文600字 篇一家是一个温暖的港湾,是每个人一生中最重要的地方。在同一个屋檐下生活,意...
养兔真让我着迷小学作文(实用... 养兔真让我着迷小学作文 篇一 我家养了一只可爱的小兔子,从那时起,我就对养兔子产生了浓厚的兴趣...
春天作文【通用6篇】 春天作文 篇一春天的美丽春天是四季中最美丽的季节之一。当冬天的寒冷逐渐消退,春天的阳光温暖地洒在大地...
牛奶的自述小学作文(精彩3篇... 牛奶的自述小学作文 篇一我是一杯牛奶,来自一头温柔的奶牛妈妈。在牧场上,我见证了奶牛妈妈们辛勤的劳动...
言而有信小学作文(推荐5篇) 言而有信小学作文 篇一:诚信的重要性诚信是一种美德,是一个人最基本的道德品质之一。作为小学生,我们更...
我喜欢的小动物作文【实用6篇... 我喜欢的小动物作文 篇一我喜欢的小动物是松鼠。每次看到它们在树上迅速爬行,我总会被它们的灵活和机敏所...
杭州游之虎跑公园小学作文【经... 杭州游之虎跑公园小学作文 篇一我最喜欢的杭州景点之一就是虎跑公园。这个公园坐落在风景如画的西湖边,是...
“日”字变形记小学作文【推荐... “日”字变形记小学作文 篇一太阳的日子我喜欢太阳,因为它给了我们光明和温暖。太阳每天都会升起,照亮大...
小小的欲望作文350字(最新... 篇一:小小的欲望小小的欲望作文350字 篇一小小的欲望,是我们内心深处微不可见的火花,它时而燃烧得熊...
奇思妙想的作文400字(精选... 奇思妙想的作文400字 篇一标题:梦幻的花园我有一个奇妙的梦想,梦见自己拥有了一个令人惊叹的花园。这...