在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",// 允許使用按<tab>速寫代碼片段，例如，輸入“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" }

總結

以上是生活随笔為你收集整理的vscode使用技巧（2）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。