VS Code for front-end developer


Photo by Irvan Smith on Unsplash

Couple of days back I’ve started using VS Code as an additional code editor (along with Visual Studio and Sublime). I want to share some findings and issues, which I’ve faced.

  1. The first thing I do when install new code editor I enable display of special characters. Unfortunately I didn’t like what I saw. Bad news – by default VS Code has a bad styling for special character (they have low opacity equal to .16). Good news is that VS Code is a hackable editor. You can open Developer Tools (yeah, the Chrome developer tools!) and find styles you don’t like. Bad news is that there is no standard way to edit these style. If you try to edit “..\Microsoft VS Code Insiders\resources\app\out\vs\workbench\electron-browser\workbench.main.css” you see warning message that your installation probably broken and suggestion to re-install. Even if you skip it you loose your changes after each update. Fortunately there is an extension to overcome this issue (partially): Custom CSS and JS Loader. This extension makes possible to load some custom CSS files to your VS Code and adjust styling to meet your expectations. Couple of important notes here:
    • Your should not put your custom files into VS Code’s directory. It will be deleted after next update;
    • Extension modifies VS Code’s files hence you need to re-enable it each time (Ctrl+Shift+P => Enable Custom CSS and JS) and also ignore warning message;
    special-chars

    Here is the screen of my changes, just to illustrate, that by using this extension you can change everything:

    Issue: I hope that at some point Microsoft will add support for custom styling, because it’s really handy and Themes are not covering everything.

  2. This is a funny one. When I’ve opened JSON file with some configuration and tried to modify it I’ve noticed, that VS Code removes blank lines from it. Unfortunately currently I don’t know how to configure this behavior, so I’ve disabled entire JSON formatter:
    "json.format.enable": false

    ToDo: To investigate whether it’s possible to customize JSON formatter behavior. Sometimes blank lines improves readability of JSON files separating unrelated sections.
  3. Personally I really like Sublime and use it a lot for JavaScript. Hence I wanted to make keyboard and mouse behavior of VS Code similar to Sublime. Fortunately there is already an official Microsoft extension for this purpose: Sublime Text Keymap. Bad news (as usual) that it’s not fully done yet. For example you cannot use mouse for vertical selection or creation of multiple cursors.
    Issue: Some features provided by Sublime are not supported yet, mouse customization not supported at all.
  4. Another important feature is a support for ESLint. There is an extension already and for me it works great. The only thing I want to mention, that starting from version 1.1.0 it supports nested ESLint configurations. That’s totally amazing when you have different ESLint configurations for different sub-directories (for example Back-End and Front-End in the same repository). So here is the small example of how you can use it. Let’s consider we have a root .eslintrc.js file and a server sub-directory with Node.js files. The config for this directory can look like this:
module.exports = {
extends: '../.eslintrc.js',
env: {
node: true
},
rules: {
'no-console': 'off'
}
};

In this case extension will apply these rules for all files in this sub-directory. That’s really handy and I didn’t face any issues yet.

  • The last thing I wanted to mention is Terminal support. It’s a great feature of VS Code:
    • You can have multiple CMD instances at the same time (e.g. Node server, Source code watcher, ESLint);
    • You can stop long running tasks anytime by pressing Ctrl+C;
  • At the end just want to attach my current settings.json file:

    // Place your settings in this file to overwrite the default settings
    {
    "editor.insertSpaces": false,
    "editor.fontLigatures": true,
    "editor.renderWhitespace": "boundary",
    "files.autoSave": "afterDelay",
    "editor.formatOnSave": true,
    "editor.fontSize": 13,
    "editor.fontFamily": "Consolas",
    // TODO: investigate
    "json.format.enable": false,
    "files.trimTrailingWhitespace": true,
    "files.exclude": {
    "**/node_modules": true
    },
    
    // Custom CSS and JS extension section.
    "vscode_custom_css.imports": [
    "file://**/*.css"
    ],
    
    // ESLint section
    "eslint.enable": true
    }
    

    Try VS Code now! It’s really good product. I’ll share more information if I find something interesting.

    One thought on “VS Code for front-end developer

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out /  Change )

    Google photo

    You are commenting using your Google account. Log Out /  Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out /  Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out /  Change )

    Connecting to %s