Skip to content

Instantly share code, notes, and snippets.

View prigara's full-sized avatar

Ekaterina Prigara prigara

  • JetBrains
  • Munich, Germany
View GitHub Profile
@prigara
prigara / changed-mac-os-shortcuts.md
Last active November 20, 2020 12:00
macOS system shortcuts keymap for WebStorm vs default keymap

The macOS System Shortcuts Keymap for WebStorm is available in the Plugin Marketplace.

Changed shortcuts

New shortcuts
Action Old shortcuts
@prigara
prigara / index.js
Last active January 4, 2020 20:15
In the sample app (https://github.com/JetBrains/webstorm-samples/tree/master/Express) replace routes/index.js with this file to follow the steps in the tutorial: http://blog.jetbrains.com/webstorm/2018/01/how-to-debug-with-webstorm/
var express = require("express");
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Welcome!' });
next()
});
router.get('/:lang', function (req, res) {
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
@prigara
prigara / demo.js
Last active February 28, 2019 16:47
Debug console in WebStorm 2019.1
// Open this file in WebStorm
// Right-click on it in the editor
// Select Debug (this will run the file with Node.js)
// Open the Debugger Console tab in the Debug tool window
class Cat {
constructor(name, age, color) {
this.name = name;
this.age = age;
this.color = color;
@prigara
prigara / App-1.js
Last active June 20, 2018 16:55
Extract React Component
// Before refactoring
import React, { Component } from "react";
import "./App.css";
class App extends Component {
constructor(props) {
super(props);
this.state = { isToggleOn: true };
this.handleClick = this.handleClick.bind(this);
@prigara
prigara / app.module.ts
Created May 14, 2018 13:41
Unoptimized imports
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // FormsModule is no longer unused, so we can remove its import
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';
import { ApplicationInitStatus } from '@angular/core'; // this one imports from the same module as the one above, so they can be merged into one import
export default class App extends Component<{}> {
sayHi() {
console.log("Hello!") // breakpoint on this line
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!

Hi! I'm from the Webstorm team at JetBrains. We were planning to release a similar plugin to support Styled Components within the nearest days when we saw this. We would love it if you could accept our implementation so that the community of Styled Components users would be able to contribute.

I've made some changes. The main points are:

  1. When building injected file content we replace the string interpolation argument with a fake identifier to avoid breaking the CSS syntax structure as much is possible. For example, in case of
let someCss = styled(Box) `
@prigara
prigara / example.html
Created July 29, 2016 15:29
Sample file for WebStorm Quick start quide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meet WebStorm</title>
</head>
<body>
<div class="container">
<h1 id="greeting">Hello!</h1>