According to the Visual Studio Code&#39;s user and workspace settings [documentation][1], you can add rulers which mark specified columns. 

Search for &quot;ruler&quot; in Settings. Click on the link to edit the .json file. Add the property below for rule at 80 characters.

Example setting:

    // Columns at which to show vertical rulers
    &quot;editor.rulers&quot;: [80],


  [1]: https://code.visualstudio.com/docs/customization/userandworkspace

Navigation to follow
 1. **File** -&gt; **Preferences** -&gt; **Settings**
2. Select the tab option: Applies to only =&gt; **&#39;User&#39;** or **&#39;Workspace&#39;**
3. **Search** for **&#39;rulers&#39;**
4. open the **setting.json** under **&#39;rulers&#39;**
5. add the line `&quot;editor.rulers&quot;: [80]`

Version I&#39;m using is 1.49.1



I&#39;ve been having some trouble with react router (i&#39;m using version^4.0.0).

this is my index.js

    import React from &#39;react&#39;;
    import ReactDOM from &#39;react-dom&#39;;
    import App from &#39;./App&#39;;
    import &#39;./index.css&#39;;
    import { Router, Route, Link, browserHistory } from &#39;react-router&#39;;
    
    
    ReactDOM.render(
      &lt;Router history={browserHistory} &gt;
      	&lt;Route path=&quot;/&quot; component={App} /&gt;
      	
      &lt;/Router&gt;,
      document.getElementById(&#39;root&#39;)
    );


the App.js is just anything. i&#39;m posting the basic one here, cause it&#39;s not the problem (i believe) 

    import React, { Component } from &#39;react&#39;;
    import logo from &#39;./logo.svg&#39;;
    import &#39;./App.css&#39;;
    
    class App extends Component {
      render() {
        return (
          &lt;div className=&quot;App&quot;&gt;
            &lt;div className=&quot;App-header&quot;&gt;
              &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
              &lt;h2&gt;Welcome to React&lt;/h2&gt;
            &lt;/div&gt;
            &lt;p className=&quot;App-intro&quot;&gt;
              To get started, edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
            &lt;/p&gt;
          &lt;/div&gt;
        );
      }
    }
    
    export default App;

and this is what happens when i check the console log


    Router.js:43 Uncaught TypeError: Cannot read property &#39;location&#39; of undefined
        at new Router (Router.js:43)
        at ReactCompositeComponent.js:295
        at measureLifeCyclePerf (ReactCompositeComponent.js:75)
        at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294)
        at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280)
        at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188)
        at Object.mountComponent (ReactReconciler.js:46)
        at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
        at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
        at Object.mountComponent (ReactReconciler.js:46)

oh, and this is the package.json just in case

    {
      &quot;name&quot;: &quot;teste2&quot;,
      &quot;version&quot;: &quot;0.1.0&quot;,
      &quot;private&quot;: true,
      &quot;dependencies&quot;: {
        &quot;react&quot;: &quot;^15.4.2&quot;,
        &quot;react-dom&quot;: &quot;^15.4.2&quot;,
        &quot;react-router&quot;: &quot;^4.0.0&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;react-scripts&quot;: &quot;0.9.5&quot;
      },
      &quot;scripts&quot;: {
        &quot;start&quot;: &quot;react-scripts start&quot;,
        &quot;build&quot;: &quot;react-scripts build&quot;,
        &quot;test&quot;: &quot;react-scripts test --env=jsdom&quot;,
        &quot;eject&quot;: &quot;react-scripts eject&quot;
      }
    }

i&#39;ve been checking this on other places, but i didn&#39;t find a way to solve it. 

Thank you guys very much for your patience and help!!


react router v^4.0.0 Uncaught TypeError: Cannot read property &#39;location&#39; of undefined

I would like to `markAsDirty` all the controls inside of a `FormGroup`.



Angular 2: Iterate over reactive form controls

Is it possible to add a right margin to the Visual Studio Code editor? 

I would like to set a margin of 80 characters, but can&#39;t find such option in the settings.

How to add a right margin to the Visual Studio Code editor?

<p>Is it possible to add a right margin to the Visual Studio Code editor?</p>
<p>I would like to set a margin of 80 characters, but can't find such option in the settings.</p>


I don&#39;t use TypeScript for the time being. Only ES6 with babel.    
I don&#39;t have installed TypeScript in *node_modules*.

I get a specific warning from VSCode every time I open a workspace. 

&gt; `\node_modules\typescript\lib` doesn&#39;t point to a valid *tsserver* install. Falling back to bundled TypeScript version. 

How can I get rid of such warnings? Or should I change editor in order to feel calm?

How to disable TypeScript warnings in VSCode?

In Visual Studio Professional, we have a shortcut key, &lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;M&lt;/kbd&gt; &lt;kbd&gt;Ctrl&lt;/kbd&gt;  + &lt;kbd&gt;O&lt;/kbd&gt; to collapse all methods and properties in a class. How can I do a similar thing in Visual Studio Code?

I know there are shortcut keys like &lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;Shift&lt;/kbd&gt; + &lt;kbd&gt;[&lt;/kbd&gt;, but this does not meet the needs.

Is it possible to get the Visual Studio Professional-like behaviour in Visual Studio Code?


Collapse all methods in Visual Studio Code

I am consuming a React component called [shiitake][1] from npm into my project where I use TypeScript. That library does not have TypeScript declarations so I thought I would write one. The declaration file looks like below (it may not be complete but don&#39;t worry about it too much):

    import * as React from &#39;react&#39;;
    
    declare module &#39;shiitake&#39; {
    
        export interface ShiitakeProps {
            lines: number;
        }
    
        export default class Shiitake extends React.Component&lt;ShiitakeProps, any&gt; { 
        }
    }

I have put this inside `./typings/shiitake.d.ts` file and on VS Code, I am seeing the below error:

&gt; [ts] Invalid module name in augmentation. Module &#39;shiitake&#39; resolves to an untyped module at &#39;d:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js&#39;, which cannot be augmented.

On the consumption side, I am still getting the same error even if with the above declaration (since I have `noImplicitAny` compiler switch turned on):

    /// &lt;reference path=&quot;../../../../typings/shiitake.d.ts&quot; /&gt;
    import * as React from &#39;react&#39;;
    import Shiitake from &#39;shiitake&#39;;

&gt; [ts] Could not find a declaration file for module &#39;shiitake&#39;. &#39;d:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js&#39; implicitly has an &#39;any&#39; type.

The standard why of acquiring declaration files for this type of modules is through [`@types/` way][2] and it works well. However, I cannot get the custom typings work. Any thoughts?


  [1]: https://github.com/bsidelinger912/shiitake
  [2]: https://blog.mariusschulz.com/2016/10/23/typescript-2-0-acquiring-type-declaration-files

TypeScript custom declaration files for untyped npm modules

I would like to switch from powershell.exe to cmd.exe in the terminal but i&#39;m not sure how to do so. Provided screenshot for clarification.

[![screenshot 1][1]][1]
[![screenshot 2][2]][2]

  [1]: https://i.imgur.com/tkFzi6T.png
  [2]: https://i.imgur.com/L6RjdF4.png

Visual Studio Code, how to switch from powershell.exe to cmd.exe

Visual Studio Code&#39;s default status bar color is blue, and I find it quite distracting. I used [this extension][1] to change the color, but it has stopped working after the *1.10.2* update.

  [1]: https://marketplace.visualstudio.com/items?itemName=bentx.vscode-custom-theme

Content Type	Original Author	Original Content on Stackoverflow
Question	Alexey	View Question on Stackoverflow
Solution 1 - Visual Studio-Code	alexriedl	View Answer on Stackoverflow
Solution 2 - Visual Studio-Code	SridharKritha	View Answer on Stackoverflow

How to add a right margin to the Visual Studio Code editor?

Visual Studio-Code Problem Overview

Visual Studio-Code Solutions

Solution 1 - Visual Studio-Code

Solution 2 - Visual Studio-Code

Angular 2: Iterate over reactive form controls

react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined

Attributions