1/27/2022»»Thursday

Phpstorm 2020

1/27/2022

PhpStorm supports developing, running, and debugging TypeScript source code. PhpStorm recognizes .ts and .tsx files and provides full range of coding assistance for editing them without any additional steps from your side. TypeScript files are marked with the icon.

Get past releases and previous versions of PhpStorm. Version: 2018.1.7. Build: 181.5540.39. Released: 3 December 2018. PhpStorm supports developing, running, and debugging TypeScript source code. PhpStorm recognizes.ts and.tsx files and provides full range of coding assistance for editing them without any additional steps from your side. Get code examples like 'phpstorm serial key 2020.2.3' instantly right from your google search results with the Grepper Chrome Extension. PhpStorm 2020.2 supports the OpenAPI Specifications plugin. This is a free plugin developed by JetBrains that provides completion, navigation, and validation in the OpenAPI spec files (openapi.yaml/openapi.json and swagger.yaml/swagger.json). Jetbrains-key-activation.txt 2020 JetBrains activation working method: license servers' addresses & keys! Big thanks to JBFamily China community for this activation method. Was successfully tested on for PyCharm version 19.3.

TypeScript-aware coding assistance includes completion for keywords, labels, variables, parameters, and functions, error and syntax highlighting, formatting, numerous code inspections and quick-fixes, as well as common and TypeScript-specific refactoring. PhpStorm also verifies TypeScript code on the fly and shows errors in a dedicated Problems tool window.

Compilation errors are reported in the TypeScript tool window. Learn more from Compiling TypeScript into JavaScript.

Before you start

  • Make sure the JavaScript and TypeScript bundled plugin is enabled on the Settings/Preferences Plugins page, see Managing plugins for details.

Verify TypeScript

PhpStorm verifies TypeScript code mainly based on the data from the TypeScript Language Service which also compiles TypeScript into JavaScript.

Descriptions of the errors detected in the current file and quick-fixes for them are available from the editor and from the Current File tab of the Problems tool window.

Errors across the entire project and quick-fixes for them are shown in the Project Errors tab of the Problems tool window. To open the tool window, click the Inspection widget in the upper-right corner of the editor:

See View problems and apply quick-fixes in the editor and Problems tool window for details.

Verify TypeScript in the current file

  • In the editor, hover the mouse pointer over the highlighted problem. PhpStorm shows a tooltip with a description of the problem.

    Apply the suggested quick-fix or click More actions and select the relevant one from the list.

  • Alternatively open the Current File tab of the Problems tool window Alt+6, where you can view problem descriptions, apply quick-fixes, navigate to the fragments in the source code where errors occurred, as well as fix them in the Editor Preview pane without leaving the tool window. Learn more from Problems tool window.

Verify TypeScript in the entire project

  1. To open the Problems tool window, click the Inspections widget in the upper-right corner of the editor.

    Alternatively select View Tool windows Problems from the main menu or press Alt+6.

  2. Open the Project Errors tab, which shows the errors across the entire project, with error messages grouped by files in which they were detected.

    Here you can view problem descriptions, apply quick-fixes, navigate to the fragments in the source code where errors occurred, as well as fix them in the Editor Preview pane without leaving the tool window. Learn more from Problems tool window.

Configure integration with the TypeScript Language Service

In most cases, everything works out of the box and no manual configuration is required. However, if you want to use a custom typescript package or pass some command-line options to the TypeScript Language Service, you can customize the default settings.

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks TypeScript.

    Alternatively, click the TypeScript widget on the Status bar and select Configure TypeScript.

    The TypeScript page opens.

  2. Specify the Node.js interpreter to use. This can be a local Node.js interpreter or a Node.js on Windows Subsystem for Linux.

  3. In the TypeScript field, specify the version of the TypeScript to use (PhpStorm displays the currently chosen version).

    • By default, the typescript package from the project's node_modules folder is used.

    • Bundled: choose this option to use the typescript package that is shipped with PhpStorm without attempting to find another one.

    • Select: choose this option to use a custom typescript package instead of the one bundled with PhpStorm. In the dialog that opens, choose the path to the relevant package.

    • If your project package manager is Yarn 2, you have to use the typescript package installed via Yarn 2. In this case, yarn:package.json:typescript is by default selected.

      Learn more about package managers from npm and Yarn.

  4. Make sure the TypeScript Language Service checkbox is selected.

  5. Use the controls below to configure the behaviour of the TypeScript Language Service.

  6. In the Options field, specify the command-line options to be passed to the TypeScript Language Service when the tsconfig.json file is not found. See the list of acceptable options at TSC arguments. Note that the -w or --watch (Watch input files) option is irrelevant.

You can enhance completion in JavaScript files with suggestions from the TypeScript Language Service. To do that, add 'allowJS' : true to your jsconfig.json or tsconfig.json file. Learn more from Code completion and Configure JavaScript libraries.

Restart the TypeScript Language Service

  • Click the TypeScript widget on the Status bar and select Restart TypeScript Service from the list.

Edit TypeScript code

PhpStorm brings you smart coding assistance for TypeScript including context-aware code completion, auto import for symbols, documentation look-up, parameter hints, navigation, TypeScript-aware syntax highlighting and linting, refactoring and more.

Auto import

PhpStorm can generate import statements for modules, classes, components, and any other TypeScript symbols that are exported. By default, PhpStorm adds import statements when you complete TypeScript symbols.

See Auto import to learn how to optimize import statements and configure their style.

When you type your code or paste a fragment with a symbol that is not yet imported, PhpStorm can also generate an import statement for this symbol. If there is only one source to import the symbol from, PhpStorm inserts an import statement silently. Otherwise, use an auto-import tooltip or a dedicated import quick-fix.

Add import statements on code completion

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor General Auto Import. The Auto Import page opens.

  2. In the TypeScript/JavaScript area, select the Add TypeScript imports automatically and On code completion checkboxes.

To change the background color for auto-import tooltips, press Ctrl+Alt+S and go to Editor Color Scheme General Popups and Hints Question hints.

Add import statements on typing or pasting code

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor General Auto Import. The Auto Import page opens.

  2. In the TypeScript/JavaScript area, select the Add TypeScript imports automatically and Unambiguous imports on the fly checkboxes.

Use auto-import tooltips

If for some reason an import statement for a TypeScript symbol was not added on completion or editing, PhpStorm shows you a popup that suggests importing the symbol.

  • To accept the suggestion, press Alt+Enter:

  • If there's more than one possible source of import, PhpStorm informs you about that:

    Pressing Alt+Enter in this case opens a list of suggestions:

  • To hide auto-import tooltips, open the Settings/Preferences dialog Ctrl+Alt+S, go to Editor General Auto Import, and clear the With auto-import tooltip checkbox.

Use import quick-fixes

If an auto-import tooltip doesn't show up, you can always add an import statement via the dedicated quick-fix.

  • To generate an import, select Add import statement:

    If there is only one source to import a symbol from, PhpStorm generates an import statement:

  • If there are several sources to import a symbol from, select the relevant one from the suggestion list:

  • If the TypeScript Language Service is enabled in your project, you can also use its suggestion:

    If there are several sources to import a symbol from, select the relevant one from the list that the TypeScript Language Service shows:

Configure the appearance of import statements

  • In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor Code Style TypeScript, and use the controls in the Imports tab, see Imports tab for details.

Documentation look-up

PhpStorm lets you get reference for symbols from your project and from its dependencies, for symbols defined in external libraries, and for standard JavaScript APIs because TypeScript implements all of them.

The documentation is shown in a Documentation popup that helps navigate to the related symbols via hyperlinks, and provides a toolbar for moving back and forth through the already navigated pages.

View documentation for a symbol

  • Position the caret at the symbol and press Ctrl+Q or select View Quick Documentation Lookup from the main menu.

  • When you hover the mouse pointer over a symbol, PhpStorm immediately displays the reference for it in the Documentation popup.

    You can turn off this behavior or configure the popup to appear faster or slower, see Configuring the behavior of Documentation popup below.

For standard JavaScript methods available in TypeScript, PhpStorm also shows a link to the corresponding MDN article.

Configure the behavior of Documentation popup

  • To turn off showing documentation automatically, open the Settings/Preferences dialog Ctrl+Alt+S, go to Editor Code Editing, and clear the Show quick documentation on mouse move checkbox.

  • To have the Documentation popup shown faster or slower, open the Settings/Preferences dialog Ctrl+Alt+S, go to Editor General Code Completion, then select the Show the documentation popup checkbox and specify the delay time.

View the MDN documentation for a symbol at caret

  • In the Documentation window Ctrl+Q, click the MDN link.

  • Alternatively, press Shift+F1 or choose View External Documentation from the main menu.

PhpStorm opens the MDN article in the default PhpStorm browser.

Parameter hints

Parameter hints show the names of parameters in methods and functions to make your code easier to read. By default, parameter hints are shown only for values that are literals or function expressions but not for named objects.

Configure parameter hints

  1. Open the Settings/Preferences dialog Ctrl+Alt+S and go to Editor Inlay Hints TypeScript.

  2. Select Parameter hints from the list, make sure the Show parameter hints checkbox is selected, and then specify the context where you want parameter hints shown.

  3. For some methods and functions, PhpStorm does not show parameter hints in any context. Click Exclude list... to view these methods and functions, possibly enable parameter hints for them, or add new items to the list.

To hide parameter hints for all types of values, clear the Show parameter name hints checkbox. Learn more from Parameter info.

JavaScript libraries in TypeScript

When working with JavaScript libraries in TypeScript, you need to install type declarations for them. PhpStorm reminds you to install them via npm or yarn and updates your package .json file accordingly.

Install the type declarations

  1. Position the caret at the warning and press Alt+Enter.

  2. Select the suggestion and press Enter.

Syntax highlighting

You can configure TypeScript-aware syntax highlighting according to your preferences and habits.

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor Color Scheme TypeScript.

  2. Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configuring colors and fonts.

Code navigation

You can quickly navigate through your TypeScript project in the PhpStorm editor using different actions and popups.

Go to declaration of a symbol

You can navigate from a variable, a field, a method, or any other symbol to its declaration or view the symbol definition in a popup without jumping anywhere from the code you are editing.

  • To jump to the declaration of a symbol, place the caret at a usage of the symbol and press Ctrl+B or select Navigate Declaration or Usages from the main menu.

    Alternatively, use Ctrl+Click: keeping Ctrl pressed, hover your mouse pointer over the symbol. When the symbol turns into a hyperlink, click the hyperlink without releasing Ctrl.

  • To view the definition of a symbol in a popup, place the caret at its usage and press Ctrl+Shift+I or select View Quick Definition from the main menu.

Go to usages of a symbol

You can view a list of usages of a symbol and select the one to jump to.

  1. To get a list of usages of a symbol, place the caret at the declaration of the symbol and do one of the following:

    • Press Ctrl+B or select Navigate Declaration or Usages from the main menu.

    • Press Ctrl+Alt+F7 or select Edit Find Usages Shows Usages from the main menu.

  2. From the list, select the usage of the symbol where you want to jump.

Go to type declaration of a symbol

You can navigate from a variable, a field, a method, or any other symbol to its type declaration. Alternatively, open the type definition in a popup without jumping to the type declaration.

PhpStorm also shows the inferred type of an object. You can view the inferred type information in a tooltip or in the documentation popup.

Jump to type declaration

  • To jump from a symbol to the declaration of its type, place the caret at a usage of the symbol and press Ctrl+Shift+B or select Navigate Type Declaration from the main menu.

  • To view the type definition of a symbol in a popup, place the caret at the symbol for which you want to view the type definition and select View Quick Type Definition.

    For an instance of a class, this will reveal the class itself instead of where this instance is defined.

    PhpStorm has no default keyboard shortcut for this action, but you can manually configure it as described in Adding keyboard shortcuts.

View inferred type information of a symbol

  • Hold Ctrl and hover the mouse pointer over the symbol.

  • Alternatively, hover the mouse pointer over a symbol. PhpStorm immediately displays the reference for it in the Documentation popup.

    Learn more from Documentation look-up above.

Note the difference between Go To Declaration and Go To Type Declaration. Suppose you have a file app.ts with the following code:

import {Dog} from './dog'; let dog = new Dog(); dog.bark();
If you place the caret at Phpstormdog in dog.bark(), then Go To Declaration brings you to the declaration of the variable in let dog = new Dog (), while Go To Type Declaration brings you to the declaration of the class Dog.

Navigate between subclasses, superclasses, overrides, and implementations

You can keep track of class implementations and overriding methods either using the gutter icons in the editor or pressing the appropriate shortcuts.

Go to a subclass

  • Press Ctrl+Alt+B or click in the gutter and then select the relevant class from the list.

  • Alternatively, select Navigate Implementation(s) from the main menu or Go To Implementation(s) from the context menu and then select the relevant class from the list.

Go to a superclass or overridden method

  • Place the caret at a subclass and press Ctrl+U. PhpStorm brings you to the declaration of the superclass and positions the cursor at its name.

  • Click in the gutter next to an overriding method. PhpStorm brings you to the superclass with the cursor at the overridden method.

    Alternatively, place the caret at the overriding method and press Ctrl+U or select Navigate Super Method from the main menu or Go To Super Method from the context menu.

Go to an interface or implemented method

  • Place the caret at an implementation of an interface, press Ctrl+U, and select the interface to go to.

    PhpStorm brings you to the declaration of the interface and positions the cursor at its name.

  • Click in the gutter next to the implementing method. PhpStorm brings you to the corresponding interface with the cursor at the implemented method.

    Alternatively, place the caret at the implementing method and press Ctrl+U or select Navigate Super Method from the main menu or Go To Super Method from the context menu.

Refactoring in TypeScript

PhpStorm provides both common refactoring procedures, such as rename/move, and so on, and TypeScript-specific refactoring procedures, such as change signature, introduce parameter, introduce variable. See Rename refactorings, Move Refactorings, and Refactoring TypeScript for details.

Run and debug your application

Phpstorm 2020

With PhpStorm, you can run and debug client-side TypeScript code and TypeScript code running in Node.js. Learn more from Running and debugging TypeScript.

I'm changing my dev environment quite frequently, always looking for the current best option. While Windows with ddev was an ok option for TYPO3 development, since I'm doing Shopware including frontend development with lots of files in node-modules and corresponding file watchers, that setup has become too slow to comfortably work with. Now I finally found a setup based on Windows and WSL2 with Ubuntu that is a pleasure to work with, with all the benefits of having Linux as development environment seamlessly embedded into the Windows host system.

In this post I'm describing how to set all that up.

Goals:

  • Usable PHPStorm with fast file sync
  • Common development tools (git, ssh, tests) running
  • No restarts, no dual-boot, no weird workarounds, no file mounts or nfs
  • Running system.d, ssh agent and snap on Ubuntu
  • Seamless integration into Windows

For example consider the following screenshot:

  • Firefox is running on Windows
  • Chromium is running on Linux
  • The Windows Terminal App is running an Ubuntu Bash
  • PHPStorm is running on Linux

1. Install WSL2 with Ubuntu 2020

First of all, you need to enable WSL2 and install Ubuntu. If you already have WSL2 enabled, get Ubuntu from the Microsoft store. Otherwise, find a tutorial here: https://www.omgubuntu.co.uk/how-to-install-wsl2-on-windows-10

2. Install x410 as display manager

To be able to seamlessly integrate Windows and Linux you will need a display manager / XServer. I use (and recommend) X410 (https://x410.dev/). It's currently available for less than 10 Euro in the Microsoft store and 'simply works'.

After installing X410, add the following line to your .bashrc:

connecting your Ubuntu bash with the XServer.

If you want to get even more out of the XServer, check out the Cookbook on its website (https://x410.dev/cookbook/) - for example I added the XServer to the autostart.

3. Use keychain as ssh agent

Having an ssh agent available and loading your ssh key by default makes working with ssh or git much easier. To use your SSH key in Ubuntu, copy it to ~/.ssh/id_rsa:

Then install keychain as SSH agent and manager:

To load the key automatically and start the agent, add the following line to your .bashrc:

(of course, you can add / load other keys here, too)

More info or other ways to add SSH authentication can be found at https://medium.com/@pscheit/use-an-ssh-agent-in-wsl-with-your-ssh-setup-in-windows-10-41756755993e

4. Install Docker and enable WSL2 support

Current docker installations support WSL2 already. If you already have Docker installed, you can enable WSL2 integration, otherwise install it first. You can select the distributions where you want to use docker. After enabling, you might need to restart your WSL2 distribution to have it available.

5. Use 'systemd' hack to use snap (optional - be careful)

I wanted to be able to use snap for installing tools like node and PHPStorm - to make that possible, I needed to get systemd functional. There is no official support for running systemd on WSL2, however there are 'hacks' / 'workarounds' to make it work. Take a look before you leap and use with caution:

There may be other / updated ways to get it running at this point, keep an eye on https://github.com/microsoft/WSL/issues/5126

Once that's done, snap should be running:

6. Install PHPStorm with Snap

Now we are finally ready to install PHPStorm.

EAP:

Stable:

see also https://blog.jetbrains.com/phpstorm/2017/12/install-phpstorm-with-snaps/

Try starting PHPStorm by running phpstorm in your terminal. As I'm lazy, I added the following alias to .bashrc:

7. Install inotify for PHPStorm file watchers

PHPStorm will probably complain about file sync being slow when you start it - that's because we did not install inotify yet, which PHPStorm can utilize. To do so, type:

As the default amount of files a user can watch is pretty low - especially if you are doing anything frontend related ;) - you can increase that number by adding the following line in /etc/sysctl.conf:

and applying the change:

For more info see https://blog.jetbrains.com/idea/2010/04/native-file-system-watcher-for-linux/
For debugging the file watcher see https://confluence.jetbrains.com/display/~roman.shevchenko/Debugging+native+file+system+watcher+for+Linux

Success!
You now have a running Ubuntu with PHPStorm incl. fast file sync.

Phpstorm 2020 License Key

-- Optional --

Phpstorm

🐵 Random Stuff 🐵
The following section contains additional things I did to customize my environment and make it more fun to use - just in case someone is interested.

8. Install PHP / Composer / Node locally

As I'm doing quite a bit of development directly based on a local PHP server and nothing else, run Cypress acceptance tests via Node in PHPStorm etc. it's important for me to have my tools 'at hand' without the need to start or run a docker container.

I additionally installed PHP7.4 via apt (apt install php7.4-*), composer via the recommended install script and node via snap install node.

9. Recommendation: Use Windows Terminal - with Emoji Support 🐱🐱🐱

As a terminal application I'm using the new Windows terminal - it's fast and has some nice features like tabs for different terminals (you can mix and mash Ubuntu and Powershell for example), colored tabs and - most important: EMOJIs!

Get it from the Windows Store: https://www.microsoft.com/de-de/p/windows-terminal-preview/9n8g5rfz9xk3

10. Customize your prompt and git environment (PS_1)

As you might have seen I'm a big fan of customizing your bash prompt and displaying git status information directly. To do that, I'm using the brew formula bash-git-prompt. To install, first install linuxbrew and then tap the formula

See https://docs.brew.sh/Homebrew-on-Linux and https://formulae.brew.sh/formula/bash-git-prompt

Phpstorm 2020 Crack

11. Scaling issues

Depending on your system, you might have scaling issues when using Linux GUI Apps. In my case, adding the following to vars helped:

12. Install ddev on Ubuntu

I'd recommend installing and using ddev on Ubuntu, too - to install (if you installed linuxbrew in step 10):

See https://ddev.readthedocs.io/en/stable/#installation for more in-depth instructions.

13. Setup GPG TTY for signed commits

When using Git with signed commits from Ubuntu you may need to set a TTY for GPG to allow unlocking your key.

Add the following line to your .bashrc:

14. Bonus: Set keyboard layout to Dvorak on WSL2/X410

Some might know I'm using Dvorak as keyboard layout - to do so in Ubuntu GUI apps add the following to profile or .bashrc:

That's it
I hope some of it is useful - if you have any questions or feedback let me know via Twitter (https://twitter.com/sasunegomo) or TYPO3 Slack (@susi)

Most Viewed News