Visual Studio Code and my Setup

My Top Packages


Path Intelisense

This helps you get the relative path of your file and help you to autocomplete path names when you do something like…
import MyComponent from './src/components/MyComponent';
Plus, this works with dependencies from your packages.json.

Project Manager

This extension helps my life so much. When you have a lot of projects and don't want to waste time finding each one on your computer, you can just save them right inside the window. Just press shift + cmd + p and Project Manager: Save Project. Afterwards, you can just come back to your text editor and search right in the project manager by typing shift + cmd + p and Project Manager: List Projects to Open.

Auto Rename Tag

This one doesn't do much. But what it does do is a huge help! For example, you’re working on a React project and you want to change your component MyApp to be YourApp. This extension will rename rename every ‘MyApp’ to ‘YourApp’ at the same time.

JavaScript (ES6) code snippets

Some es6 snippets you help you write code faster.

Output Colorizer

Add color to the internal terminal. Did I mention there is a built in terminal in VSC?!?

Babel ES6/ES7

You need this if you work with React.

Color Highlight

This will highlight your color variables inside CSS and JS. So, when you type something like #fff you’ll see a white colored highlight on it.

EditorConfig

If you follow me on Youtube you have surely seen how much I like this little tool. It makes your code more consistent for multiple users. What do I mean by this? It allows you to not worry so much about your Text Editor settings and will add some handy settings like indentation or trim whitespace. This is useful for teams because it can be painful to see some 4 space indents on one page and 2 space indents on another. This works on almost every code editor too, so if your friends don't use want to use your new favorite text editor, it will work for them too.

EditorConfig Generator

This will generate a .editorConfig file for you with some nice editor settings.

Eslint

Again, this is a tool I use on every project. This tool will help you to make your code better and let you know about errors before your code runs. For example, eslint will show you when you miss a semicolon or when you declare a variable but you never use it. But these errors depend on your eslint config.
PS I have created my own. You can install it from npm npm i -D eslint-config-equimper. This one is an extension of the Airbnb linter.

Flow Ide

If you are like me and you like Flow you need this tool. Less laggy than the nuclide one in Atom plus it's the better solution for VSC I’ve found.

Guides

Add some indent guide lines to your code. Much easier on the eyes.

Indent-Rainbow

Again, an extension to make your eyes happy when looking through lots of indented code.

Jumpy

This is an awesome extension, but I don't really use it. But for the those who don’t like using their mouse, this is something you need. It will help you navigate your file really quickly without using your mouse.

Rainbow Bracket

Another one that’s easy on the eyes.

React Native Tools

React-Native user? This tool it's for you.

Wakatime

This plugin will track your time spent in your text editor each week. It's like a Fitbit for a programmer. It will tell you which project you spend the most time on, which language you use the most and can even keep track of goals you set during the week.

My Editor

My color schema is One Monokai. For icons I use Material Icon Theme

My settings

settings.json

// Place your settings in this file to overwrite the default settings
{
  "editor.fontSize": 15,
  "editor.fontFamily": "Consolas",
  "editor.tabSize": 2,
  "editor.wordWrapColumn": 80,
  "editor.fontLigatures": true,
  "editor.snippetSuggestions": "top",
  "editor.minimap.enabled": true,
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/.idea": true,
    "**/.vscode": false,
    "**/yarn.lock": true,
    "**/tmp": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true,
    "**/tmp": true
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/.git": true,
    "**/.DS_Store": true,
    "**/tmp": true,
    "**/coverage": true,
    "**/ios": true,
    "**/android": true
  },
  "files.trimTrailingWhitespace": true,
  "html.suggest.html5": true,
  "npm-intellisense.scanDevDependencies": true,
  "stylelint.enable": true,
  "typescript.check.tscVersion": false,
  "window.zoomLevel": 0,
  "terminal.external.osxExec": "iTerm.app",
  "javascript.validate.enable": false,
  "extensions.autoUpdate": true,
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "Consolas",
  "terminal.integrated.cursorStyle": "line",
  "sync.gist": "95e4cfd731754a9c023d59c0538fa6e6",
  "sync.lastUpload": "2017-06-15T15:06:31.207Z",
  "sync.autoDownload": false,
  "sync.autoUpload": false,
  "sync.lastDownload": "1970-01-01T00:00:00.000Z",
  "sync.forceDownload": false,
  "sync.anonymousGist": false,
  "color-highlight.markerType": "outline",
  "vsicons.projectDetection.disableDetect": true,
  "vsicons.dontShowNewVersionMessage": true,
  "fileHeaderCommentHelper.languageConfigs": {
    "language_javascript": {
      "template": [
        "/**",
        " * Project: $(projectName)",
        " * File: $(currentFile)",
        " * Author: Emanuel Quimper",
        " */"
      ]
    }
  },
  "workbench.welcome.enabled": false,
  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.showUpdateMessage": false,
  "sync.host": "",
  "sync.pathPrefix": "",
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": false,
  "editor.renderIndentGuides": true,
  "flow.useNPMPackagedFlow": true,
  "prettier.singleQuote": true,
  "prettier.printWidth": 80,
  "prettier.trailingComma": "all",
  "prettier.semi": true,
  "prettier.useTabs": false,
  "prettier.bracketSpacing": true,
  "sync.quietSync": false,
  "workbench.colorTheme": "Monokai"
}

Comments

Popular posts from this blog

git - the simple guide by Roger Dudler

君权谁授|合法性是个什么东西