Visual Studio Code for Docker

Docker image to run Visual Studio Code inside a docker container. This image includes:

• Linux, Debian.
• The latest Visual Studio Code release.
• Bunch of Visual Studio Code extensions.

Running

• Build the image: Clone the repository and build the image using the next command: docker build -t [desired_image_name] .

• Run the image previously built_: You can run the image previously build using the next command: docker run --rm -e DISPLAY=[address of your display] -v "[desiredPathToMount]:[onVmPath]" [desired_image_name].

• Run the image pulled from Docker Hub: docker run --rm -e DISPLAY=[address of your display] -v "[desiredPathToMount]:[onVmPath]" nocountryforgeeks/vscode-js

NOTE: On Windows 10 machines:

• It is needed to have a X-Server running. I recommended the MobaXTerm, that even can be run in a portable mode, without insalling. You can get the DISPALY setting opening a terminal:

Installed extensions

• Auto Close Tags: Automatically add HTML/XML close tag
• Auto Import - ES6, TS, JSX, TSX: Automatically finds, parses and provides code actions and code completion for all available imports. Works with JavaScript (ES6) and TypeScript (TS). Forker from old repo vscode-extension-auto-import
• Auto Rename Tag: Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
• ESLint: Integrates ESLint into VS Code.
• File Templates: Extenstion that allows to quickly create new files based on defined templates.
• __Import cost __: This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.
• HTML CSS Support: Missing CSS support for HTML documents.
• Indent rainbow: This extension colorises the indentation in front of your text alternating four different colors on each step. Some may find it helpfull in writing code for Nim or Python.
• GraphQL for VSCode; VSCode extension for GraphQL schema authoring & consumption.
• Guides: A Visual Studio Code extension for more guide lines.
• Material Icon Theme: The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code.
• IntelliSense for CSS class names in HTML: A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.
• Rainbow Brackets: Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets. This is particularly useful for Lisp or Clojure programmers, and of course, JavaScript, and other programmers.
• Prettier - Code formatter: VS Code package to format your JavaScript / TypeScript / CSS using Prettier.
• Docker: The Docker extension makes it easy to build, manage and deploy containerized applications from Visual Studio Code.
• CSS Modules: Extension for CSS Modules, which supports: autocomplete, go to definition.
• Stylelint: A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint.
• vscode-styled-components: Syntax highlighting and IntelliSense for styled-components.
• vscode-styled-components-snippets: This extension contains code snippets and some triggers for JS Styled-Components.
• SVG Viewer: SVG Viewer for Visual Studio Code.
• Babel ES6/ES7: Adds JS Babel es6/es7 syntax coloring.
• Color Highlight: This extension styles css/web colors found in your document.
• EditorConfig for VS Code: This plugin attempts to override user/workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if root=true is not specified, EditorConfig will continue to look for an .editorconfig file outside of the project.
• TODO Highlight: Highlight TODO,FIXME or any annotations within your code.
• Auto Complete Tag: Combine the functions of Auto Close Tag and Auto Rename Tag
• ES7 React/Redux/GraphQL/React-Native snippets: This extension provide you Javascript and React/Redux snippets in ES7 with babel plugins features for Vs Code.
• Markdown Preview Github Styling: hanges VS Code's built-in markdown preview to match Github's styling.
• TODO Parser: Parse TODOs in your working files.
• Live HTML Previewer: This extension allows you to preview your html files in VS Code itself. Use it to quickly set the html and css right for your webpages.
• Quokka.js: Live Scratchpad for JavaScript.
• markdownlint: Markdown linting and style checking for Visual Studio Code.
• React Native Tools: This extension provides a development environment for React Native projects. Using this extension, you can debug your code, quickly run react-native commands from the command palette, and use IntelliSense to browse objects, functions and parameters for React Native APIs.
• Debugger for Chrome: A VS Code extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol.
• Code Runner: Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, and custom command.
• npm Intellisense: Visual Studio Code plugin that autocompletes npm modules in import statements.
• Node modules navigation: Provides definitions for commonjs requires in your code for quick navigation. Works with commonjs modules and import module system.
• npm: npm support for VS Code