Cara merapikan kodingan php di visual studio code
Visual Studio Code is a great editor for PHP development. You get features like syntax highlighting and bracket matching, IntelliSense (code completion), and snippets out of the box and you can add more functionality through community-created VS Code extensions. Show
LintingVS Code uses the official PHP linter (
There are three settings to control the PHP linter:
To change the PHP settings, open your User or Workspace Settings (⌘, (Windows, Linux Ctrl+,)) and type 'php' to filter the list of available settings. To set the PHP executable path, select the Edit in settings.json link under PHP > Validate: Executable Path, which will open your user Windows
Linux and macOS
SnippetsVisual Studio Code includes a set of common snippets for PHP. To access these, hit ⌃Space (Windows, Linux Ctrl+Space) to get a context-specific list. PHP extensionsThere are many PHP language extensions available on the VS Code Marketplace and more are being created. You can search for PHP extensions from within VS Code in the Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)) then filter the extensions dropdown list by typing 'php'. Disable built-in PHP supportTo disable the built-in PHP smart completions in favor of suggestions from an installed PHP extension, uncheck PHP > Suggest: Basic, which sets DebuggingPHP debugging with XDebug is supported through a PHP Debug extension. Follow the extension's instructions for configuring XDebug to work with VS Code. Next stepsRead on to find out about:
9/1/2022 "Tips and Tricks" lets you jump right in and learn how to be productive with Visual Studio Code. You'll become familiar with its powerful editing, code intelligence, and source code control features and learn useful keyboard shortcuts. This topic goes pretty fast and provides a broad overview, so be sure to look at the other in-depth topics in Getting Started and the User Guide to learn more.
Prefer a video? You can watch a recent Microsoft Build talk Visual Studio Code tips and tricks, which describes 20 tips and tricks for working productively with VS Code. BasicsGetting startedThe best way of exploring VS Code hands-on is to open the Get Started page. You will get an overview of VS Code's customizations and features. Help > Get Started. Pick a Walkthrough for a self-guided tour through the setup steps, features, and deeper customizations that VS Code offers. As you discover and learn, the walkthroughs track your progress. If you are looking to improve your code editing skills open the Interactive Editor Playground. Try out VS Code's code editing features, like multi-cursor editing, IntelliSense, Snippets, Emmet, and many more. Help > Editor Playground. Command PaletteAccess all available commands based on your current context. Keyboard Shortcut: ⇧⌘P (Windows, Linux Ctrl+Shift+P) Default keyboard shortcutsAll of the commands are in the Command Palette with the associated key binding (if it exists). If you forget a keyboard shortcut, use the Command Palette to help you out. Keyboard reference sheetsDownload the keyboard shortcut reference sheet for your platform (macOS, Windows, Linux). Quick OpenQuickly open files. Keyboard Shortcut: ⌘P (Windows, Linux Ctrl+P) Tip: Type ? to view commands suggestions. Typing commands such as Navigate between recently opened filesRepeat the Quick Open keyboard shortcut to cycle quickly between recently opened files. Open multiple files from Quick OpenYou can open multiple files from Quick Open by pressing the Right arrow key. This will open the currently selected file in the background and you can continue selecting files from Quick Open. Navigate between recently opened folders and workspacesOpen Recent Keyboard Shortcut: ⌃R (Windows, Linux Ctrl+R) Displays a Quick Pick dropdown with the list from File > Open Recent with recently opened folders and workspaces followed by files. Command lineVS Code has a powerful command line interface (CLI) which allows you to customize how the editor is launched to support various scenarios.
.vscode folderWorkspace specific files are in a Status BarErrors and warningsKeyboard Shortcut: ⇧⌘M (Windows, Linux Ctrl+Shift+M) Quickly jump to errors and warnings in the project. Cycle through errors with F8 or ⇧F8 (Windows, Linux Shift+F8) You can filter problems either by type ('errors', 'warnings') or text matching. Change language modeKeyboard Shortcut: ⌘K M (Windows, Linux Ctrl+K M) If you want to persist the new language mode for that file type, you can use the Configure File Association for command to associate the current file extension with an installed language. CustomizationThere are many things you can do to customize VS Code.
Change your themeKeyboard Shortcut: ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T) You can install more themes from the VS Code extension Marketplace. Additionally, you can install and change your File Icon themes. KeymapsAre you used to keyboard shortcuts from another editor? You can install a Keymap extension that brings the keyboard shortcuts from your favorite editor to VS Code. Go to Preferences > Migrate Keyboard Shortcuts from... to see the current list on the Marketplace. Some of the more popular ones:
Customize your keyboard shortcutsKeyboard Shortcut: ⌘K ⌘S (Windows, Linux Ctrl+K Ctrl+S) You can search for shortcuts and add your own keybindings to the See more in Key Bindings for Visual Studio Code. Tune your settingsBy default VS Code shows the Settings editor, you can find settings listed below in a search bar, but you can still edit the underlying Open User Settings Keyboard Shortcut: ⌘, (Windows, Linux Ctrl+,) Change the font size of various UI elements
Change the zoom level
Font ligatures
Auto Save
You can also toggle Auto Save from the top-level menu with the File > Auto Save. Format on save
Format on paste
Change the size of Tab characters
Spaces or Tabs
Render whitespace
Whitespace characters are rendered by default in text selection. Ignore files / folders Removes these files / folders from your editor window.
Remove these files / folders from search results.
And many, many other customizations. Language specific settingsYou can scope the settings that you only want for specific languages by the language identifier. You can find a list of commonly used language IDs in the Language Identifiers reference.
Add JSON validationEnabled by default for many file types. Create your own schema and validation in
or for a schema defined in your workspace
or a custom schema
See more in the JSON documentation. ExtensionsKeyboard Shortcut: ⇧⌘X (Windows, Linux Ctrl+Shift+X) Find extensions
Install extensionsIn the Extensions view, you can search via the search bar or click the More Actions (...) button to filter and sort by install count. Extension recommendationsIn the Extensions view, click Show Recommended Extensions in the More Actions (...) button menu. Creating my own extensionAre you interested in creating your own extension? You can learn how to do this in the Extension API documentation, specifically check out the documentation on contribution points.
Files and foldersIntegrated TerminalKeyboard Shortcut: ⌃` (Windows, Linux Ctrl+`) Further reading:
Keyboard Shortcut: ⌘B (Windows, Linux Ctrl+B) Toggle PanelKeyboard Shortcut: ⌘J (Windows, Linux Ctrl+J) Zen modeKeyboard Shortcut: ⌘K Z (Windows, Linux Ctrl+K Z) Enter distraction free Zen mode. Press Esc twice to exit Zen Mode. Side by side editingKeyboard Shortcut: ⌘\ (Windows, Linux Ctrl+\) You can also drag and drop editors to create new editor groups and move editors between groups. Switch between editorsKeyboard Shortcut: ⌘1 (Windows, Linux Ctrl+1), ⌘2 (Windows, Linux Ctrl+2), ⌘3 (Windows, Linux Ctrl+3) Move to Explorer windowKeyboard Shortcut: ⇧⌘E (Windows, Linux Ctrl+Shift+E) Create or open a fileKeyboard Shortcut: Ctrl+click (Cmd+click on macOS) You can quickly open a file or image or create a new file by moving the cursor to the file link and using Ctrl+click. Close the currently opened folderKeyboard Shortcut: ⌘K F (Windows, Linux Ctrl+K F) Navigation historyNavigate entire history: ⌃Tab (Windows, Linux Ctrl+Tab) Navigate back: ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-) Navigate forward: ⌃⇧- (Windows Alt+Right, Linux Ctrl+Shift+-) File associationsCreate language associations for files that aren't detected correctly. For example, many configuration files with custom file extensions are actually JSON.
Preventing dirty writesVS Code will show you an error message when you try to save a file that cannot be saved because it has changed on disk. VS Code blocks saving the file to prevent overwriting changes that have been made outside of the editor. In order to resolve the save conflict, click the Compare action in the error message to open a diff editor that will show you the contents of the file on disk (to the left) compared to the contents in VS Code (on the right): Use the actions in the editor toolbar to resolve the save conflict. You can either Accept your changes and thereby overwriting any changes on disk, or Revert to the version on disk. Reverting means that your changes will be lost. Note: The file will remain dirty and cannot be saved until you pick one of the two actions to resolve the conflict. Editing hacksHere is a selection of common features for editing code. If the keyboard shortcuts aren't comfortable for you, consider installing a keymap extension for your old editor. Tip: You can see recommended keymap extensions in the Extensions view by filtering the search to Multi cursor selectionTo add cursors at arbitrary positions, select a position with your mouse and use Alt+Click (Option+Click on macOS). To set cursors above or below the current position use: Keyboard Shortcut: ⌥⌘↑ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) or ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) You can add additional cursors to all occurrences of the current selection with ⇧⌘L (Windows, Linux Ctrl+Shift+L).
If you do not want to add all occurrences of the current selection, you can use ⌘D (Windows, Linux Ctrl+D) instead. This only selects the next occurrence after the one you selected so you can add selections one by one. Column (box) selectionYou can select blocks of text by holding Shift+Alt (Shift+Option on macOS) while you drag your mouse. A separate cursor will be added to the end of each selected line. You can also use keyboard shortcuts to trigger column selection. Vertical rulersYou can add vertical column rulers to the editor
with the
Fast scrollingPressing the Alt key enables fast scrolling in the editor and Explorers. By default, fast scrolling uses a 5X speed multiplier but
you can control the multiplier with the Editor: Fast Scroll Sensitivity ( Copy line up / downKeyboard Shortcut: ⇧⌥↑ (Windows Shift+Alt+Up, Linux Ctrl+Shift+Alt+Up) or ⇧⌥↓ (Windows Shift+Alt+Down, Linux Ctrl+Shift+Alt+Down)
Move line up and downKeyboard Shortcut: ⌥↑ (Windows, Linux Alt+Up) or ⌥↓ (Windows, Linux Alt+Down) Shrink / expand selectionKeyboard Shortcut: ⌃⇧⌘← (Windows, Linux Shift+Alt+Left) or ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right) You can learn more in the Basic Editing documentation. Go to Symbol in FileKeyboard Shortcut: ⇧⌘O (Windows, Linux Ctrl+Shift+O) You can group the symbols by kind by adding a colon, Go to Symbol in WorkspaceKeyboard Shortcut: ⌘T (Windows, Linux Ctrl+T) Outline viewThe Outline view in the File Explorer (default collapsed at the bottom) shows you the symbols of the currently open file. You can sort by symbol name, category, and position in the file and allows quick navigation to symbol locations. Navigate to a specific lineKeyboard Shortcut: ⌃G (Windows, Linux Ctrl+G) Undo cursor positionKeyboard Shortcut: ⌘U (Windows, Linux Ctrl+U) Trim trailing whitespaceKeyboard Shortcut: ⌘K ⌘X (Windows, Linux Ctrl+K Ctrl+X) Transform text commandsYou can change selected text to uppercase, lowercase, and title case with the Transform commands from the Command Palette. Code formattingCurrently selected source code: ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F) Whole document format: ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I) Code foldingKeyboard Shortcut: ⌥⌘[ (Windows, Linux Ctrl+Shift+[) and ⌥⌘] (Windows, Linux Ctrl+Shift+]) You can also fold/unfold all regions in the editor with Fold All (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) and Unfold All (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)). You can fold all block comments with Fold All Block Comments (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)). Select current lineKeyboard Shortcut: ⌘L (Windows, Linux Ctrl+L) Navigate to beginning and end of fileKeyboard Shortcut: ⌘↑ (Windows, Linux Ctrl+Home) and ⌘↓ (Windows, Linux Ctrl+End) Open Markdown previewIn a Markdown file, use Keyboard Shortcut: ⇧⌘V (Windows, Linux Ctrl+Shift+V) Side by side Markdown edit and previewIn a Markdown file, use Keyboard Shortcut: ⌘K V (Windows, Linux Ctrl+K V) The preview and editor will synchronize with your scrolling in either view. IntelliSense⌃Space (Windows, Linux Ctrl+Space) to trigger the Suggestions widget. You can view available methods, parameter hints, short documentation, etc. PeekSelect a symbol then type ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10). Alternatively, you can use the context menu. Go to DefinitionSelect a symbol then type F12. Alternatively, you can use the context menu or Ctrl+click (Cmd+click on macOS). You can go back to your previous location with the Go > Back command or ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-). You can also see the type definition if you press Ctrl (Cmd on macOS) when you are hovering over the type. Go to ReferencesSelect a symbol then type ⇧F12 (Windows, Linux Shift+F12). Alternatively, you can use the context menu. Find All References viewSelect a symbol then type ⇧⌥F12 (Windows, Linux Shift+Alt+F12) to open the References view showing all your file's symbols in a dedicated view. Rename SymbolSelect a symbol then type F2. Alternatively, you can use the context menu. Search and modifyBesides searching and replacing expressions, you can also search and reuse parts of what was matched, using regular expressions with capturing groups. Enable regular expressions in the search box by clicking the Use Regular Expression .eslintrc.jsonInstall the ESLint extension. Configure your linter however you'd like. Consult the ESLint specification for details on its linting rules and options. Here is configuration to use ES6.
package.jsonSee IntelliSense for your Emmet syntaxSupport for Emmet syntax. SnippetsCreate custom snippetsFile > Preferences > User Snippets (Code > Preferences > User Snippets on macOS), select the language, and create a snippet.
See more details in Creating your own Snippets. Git integrationKeyboard Shortcut: ⌃⇧G (Windows, Linux Ctrl+Shift+G) Git integration comes with VS Code "out-of-the-box". You can install other SCM providers from the Extension Marketplace. This section describes the Git integration but much of the UI and gestures are shared by other SCM providers. DiffsFrom the Source Control view, select a file to open the diff. Alternatively, click the Open Changes button in the top right corner to diff the current open file. Views The default view for diffs is the side by side view. Toggle inline view by clicking the More Actions (...) button in the top right and selecting Toggle Inline View. If you prefer the inline view, you can set Review pane Navigate through diffs with F7 and ⇧F7 (Windows, Linux Shift+F7). This will present them in a unified patch format. Lines can be navigated with arrow keys and pressing Enter will jump back in the diff editor and the selected line. Edit pending changes You can make edits directly in the pending changes of the diff view. BranchesEasily switch between Git branches via the Status Bar. StagingStage file changes Hover over the number of files and click the plus button. Click the minus button to unstage changes. Stage selected Stage a portion of a file by selecting that file (using the arrows) and then choosing Stage Selected Ranges from the Command Palette. Undo last commitClick the (...) button and then select Undo Last Commit to undo the previous commit. The changes are added to the Staged Changes section. See Git outputVS Code makes it easy to see what Git commands are actually running. This is helpful when learning Git or debugging a difficult source control issue. Use the Toggle Output command (⇧⌘U (Windows Ctrl+Shift+U, Linux Ctrl+K Ctrl+H)) and select Git in the dropdown. Gutter indicatorsView diff decorations in editor. See documentation for more details. Resolve merge conflictsDuring a merge, go to the Source Control view (⌃⇧G (Windows, Linux Ctrl+Shift+G)) and make changes in the diff view. You can resolve merge conflicts with the inline CodeLens which lets you Accept Current Change, Accept Incoming Change, Accept Both Changes, and Compare Changes. Set VS Code as default merge tool
Set VS Code as default diff tool
DebuggingConfigure debuggerFrom the Run and Debug view
(⇧⌘D (Windows, Linux Ctrl+Shift+D)), select create a launch.json file, which will prompt you to select the environment that matches your project (Node.js, Python, C++, etc). This will generate a Breakpoints and stepping throughPlace breakpoints next to the line number. Navigate forward with the Debug widget. Data inspectionInspect variables in the Run panels and in the console. LogpointsLogpoints act much like breakpoints but instead of halting the debugger when they are hit, they log a message to the console. Logpoints are especially useful for injecting logging while debugging production servers that cannot be modified or paused. Add a logpoint with the Add Logpoint command in the left editor gutter and it will be displayed as a "diamond" shaped icon. Log messages are plain text but can include expressions to be evaluated within curly braces ('{}'). Task runnerAuto detect tasksSelect Terminal from the top-level menu, run the command Configure Tasks, then select the type of task you'd like to run. This will generate a
There are occasionally issues with auto generation. Check out the documentation for getting things to work properly. Select Terminal from the top-level menu, run the command Run Task, and select the task you want to run. Terminate the running task by running the command Terminate Task Define keyboard shortcuts for tasksYou can define a keyboard shortcut for any task. From the Command Palette
(⇧⌘P (Windows, Linux Ctrl+Shift+P)), select Preferences: Open Keyboard Shortcuts File, bind the desired shortcut to the For example, to bind Ctrl+H to the
Run npm scripts as tasks from the ExplorerFrom the explorer you can open a script in the editor, run it as a task, and launch it with the node debugger (when the script defines a debug option like With the setting Portable modeVS Code has a Portable mode which lets you keep settings and data in the same location as your installation, for example, on a USB drive. Insiders buildsThe Visual Studio Code team uses the Insiders version to test the latest features and bug fixes of VS Code. You can also use the Insiders version by downloading it here.
9/1/2022 |