#vue-eslint prettier vscode | Explore Tumblr posts and blogs

macunan · 4 years ago

Text

Ultimate Vim Configuration for Developer

Install latest version of nodejs (For ubuntu like distro)

curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh sudo bash nodesource_setup.sh sudo apt-get install -y nodejs

Download plug.vim and put it in the "autoload" directory.

usually found in the echo $VIMRUNTIME directory

in my case it was :/usr/local/share/vim/vim82

since I compiled from source in most installations you can do the following:

Vim

Unix

curl -fLo ~/.vim/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

You can automate the process by putting the command in your Vim configuration file as suggested here.

Windows (PowerShell)

iwr -useb https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |` ni $HOME/vimfiles/autoload/plug.vim -Force

Neovim

Unix, Linux

sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'

edit and add the following to your .vimrc:

set number set clipboard=unnamedplus colorscheme peaksea set backspace=indent,eol,start call plug#begin('~/.vim/plugged') Plug 'neoclide/coc.nvim', {'branch': 'release'} Plug 'ctrlpvim/ctrlp.vim' Plug 'ctrlpvim/ctrlp.vim' Plug 'preservim/nerdtree' Plug 'chrisbra/vim-commentary' Plug 'jlanzarotta/bufexplorer' Plug 'itchyny/lightline.vim' Plug 'preservim/tagbar' call plug#end() set laststatus=2 let mapleader = "," nmap <leader>w :w!<cr> map <leader>tn :tabnew<cr> map <leader>to :tabonly<cr> map <leader>tc :tabclose<cr> map <leader>tm :tabmove " Opens a new tab with the current buffer's path " Super useful when editing files in the same directory map <leader>te :tabedit <C-r>=expand("%:p:h")<cr>/ " Close current buffer map <leader>bd :Bclose<cr> map <leader>tt :term<cr> " Close all buffers map <leader>ba :1,1000 bd!<cr> vnoremap <silent> <leader>r :call VisualSelection('replace')<CR> map <leader>o :BufExplorer<cr> " Quickly find and open a file in the CWD let g:ctrlp_map = '<C-f>' " Quickly find and open a recently opened file map <leader>f :CtrlPMRU<CR> " Quickly find and open a buffer map <leader>b :CtrlPBuffer<cr> map <leader>nn :NERDTreeToggle<cr> map <leader>nb :NERDTreeFromBookmark map <leader>nf :NERDTreeFind<cr> map <leader>ss :setlocal spell!<cr> map <leader>sn ]s map <leader>sp [s map <leader>sa zg map <leader>s? z= nmap <F8> :TagbarToggle<CR>

restart vim and type

:PlugInstall

Restart vim and enjoy.

In vim install the plugins you need for your development

For example:

:CocInstall coc-json coc-css

That was css

Few of the available plugins are:

You can find available coc extensions by searching coc.nvim on npm, or use coc-marketplace, which can search and install extensions in coc.nvim directly.

coc-angular for angular.

coc-blade-formatter for blade, Integrates the blade-formatter (Laravel Blade formatter).

coc-blade-linter for blade, Integrates the Laravel Blade Linter.

coc-browser for browser words completion

coc-calc expression calculation extension

coc-cfn-lint for CloudFormation Linter, cfn-python-lint

coc-clangd for C/C++/Objective-C, use clangd

coc-clang-format-style-options coc.nvim extension, helps you write .clang-format more easily.

coc-cmake for cmake code completion

coc-css for css, scss and less.

coc-cssmodules css modules intellisense.

coc-deno for deno.

coc-denoland for deno, fork of vscode_deno.

coc-diagnostic for All filetypes, use diagnostic-languageserver.

coc-discord discord rich presence for coc.nvim

coc-discord-rpc fully customizable discord rpc integration with support for over 130+ of the most popular languages

coc-dash-complete Press - to trigger buffer source completion.

coc-dot-complete Press . to trigger buffer source completion.

coc-ecdict ECDICT extension

coc-elixir for elixir, based on elixir-ls.

coc-ember for ember projects.

coc-emmet provides emmet suggestions in completion list.

coc-erlang_ls for erlang, based on erlang_ls

coc-esbonio for rst (reStructuredText), esbonio ([Sphinx] Python Documentation Generator) language server extension.

coc-eslint Eslint extension for coc.nvim

coc-explorer file explorer extension

coc-floaterm for vim-floaterm integration

coc-flow for flow

coc-flutter for flutter

coc-fsharp for fsharp.

coc-fzf-preview provide powerful fzf integration.

coc-gist gist management

coc-git provides git integration.

coc-glslx for glsl, use glslx.

coc-go for go, use gopls.

coc-graphql for graphql.

coc-highlight provides default document symbol highlighting and color support.

coc-html for html, handlebars and razor.

coc-htmldjango for htmldjango, django templates (htmldjango) extension. Provides "formatter", "snippets completion" and more...

coc-htmlhint for html, Integrates the HTMLHint static analysis tool.

coc-html-css-support for HTML id and class attribute completion.

coc-intelephense for php, fork of vscode-intelephense. (scoped packages: @yaegassy/coc-intelephense)

coc-java for java, use eclipse.jdt.ls.

coc-jedi for python, use jedi-language-server.

coc-json for json.

coc-julia for julia.

coc-just-complete Press _ to trigger buffer source completion.

coc-lists provides some basic lists like fzf.vim.

coc-lsp-wl for wolfram mathematica, fork of vscode-lsp-wl.

coc-markdownlint for markdown linting

coc-metals for Scala using Metals

coc-omnisharp for csharp and visualbasic.

coc-perl for perl.

coc-php-cs-fixer for php, Integrates the php-cs-fixer (PHP Coding Standards Fixer).

coc-phpactor for php, using phpactor

coc-phpls for php, use intelephense-docs.

coc-psalm for php, use psalm.

coc-powershell for PowerShellEditorService integration.

coc-prettier a fork of prettier-vscode.

coc-prisma for Prisma schema integration.

coc-pyright Pyright extension

coc-python for python, extension forked from vscode-python. (Not maintained anymore)

coc-pydocstring for python, using doq (python docstring generator) extension.

coc-r-lsp for r, use R languageserver.

coc-reason for reasonml

coc-rls for rust, use Rust Language Server

coc-rome for javascript, typescript, json and more, use Rome

coc-rust-analyzer for rust, use rust-analyzer

coc-sh for bash using bash-language-server.

coc-stylelintplus for linting CSS and CSS preprocessed formats

coc-stylelint for linting CSS and CSS preprocessed formats

coc-snippets provides snippets solution.

coc-solargraph for ruby, use solargraph.

coc-sourcekit for Swift

coc-spell-checker A basic spell checker that works well with camelCase code

coc-sql for sql.

coc-sqlfluff for sql, SQLFluff (A SQL linter and auto-formatter for Humans) extension

coc-svelte for svelte.

coc-svg for svg.

coc-swagger for improved Swagger/OpenAPI spec authoring experience.

coc-tabnine for tabnine.

coc-tailwindcss for tailwindcss.

coc-tasks for asynctasks.vim integration

coc-texlab for LaTeX using TexLab.

coc-toml for toml using taplo.

coc-translator language transaction extension

coc-tsserver for javascript and typescript.

coc-vetur for vue, use vetur.

coc-vimlsp for viml.

coc-xml for xml, use lsp4xml.

coc-yaml for yaml

coc-yank provides yank highlights & history.

coc-thrift-syntax-support for thrift.

in case it the vim version is an issue then you will need to install and compile version:

sudo apt-get install lua50 liblua50-dev liblualib50-dev sudo apt-get install libncurses5-dev libgnome2-dev libgnomeui-dev libgtk2.0-dev libatk1.0-dev libbonoboui2-dev libcairo2-dev libx11-dev libxpm-dev libxt-dev python-dev ruby-dev mercurial sudo make install sudo apt-get install python3-dev sudo apt-get install python-dev

git clone https://github.com/vim/vim.git

cd vim

./configure --with-features=huge --enable-rubyinterp --enable-python3interp --with-python-config-dir=/usr/bin/python3.6-config --enable-perlinterp --enable-gui=gtk2 --enable-cscope --prefix=/usr --enable-luainterp --with-lua-prefix=/usr/local

make

make install

You can get the config here:

https://github.com/macunan/vimconfig/blob/main/.vimrc

#vim #coc #dev #autocomplete

0 notes

psychicanchortimemachine · 4 years ago

Text

15 Essential Plugins for Visual Studio Code

Visual Studio Code could be a free, cross-platform text editor developed by Microsoft. It’s quickly changing into a crowd favorite because of its glorious performance and therefore the exuberant quantity of options it offers. Just like most day, VSCode has AN extension marketplace containing thousands of plugins with varied quality. To assist you decide out that value downloading, we have a tendency to create this assortment of the extensions we have a tendency to found most helpful and fun.

Open-In-Browser

VSCode does not supply any inbuilt interface for gap files directly within the browser. This extension adds a Open With Default Browser item to the discourse menu, likewise as command palette choices for gap in an exceedingly consumer of your selection (Firefox, Chrome, IE).

Quokka

Quokka may be a debugging tool that offers live feedback on the code you're writing. It shows you previews of the results of functions and calculated values for variables. The extension is straightforward to tack and works out of the box with JSX or matter comes.

Faker

Quickly insert placeholder knowledge mistreatment the popular cheat JavaScript library. you'll generate random names, addresses, images, phone numbers, or simply paragraphs of classic Lorem Ipsum. every class has numerous subcategories thus you'll create the information suit your wants.

CSS Peek

With this extension you'll trace the definitions of CSS categories and ids in your stylesheets. after you right click on a selector in your hypertext markup language files, selecting the choices move to Definition and Peek definition can send you to the CSS code during which you've got titled them.

HTML Boilerplate

The hypertext markup language boilerplate extension can prevent from having to manually write the head and body tags of a new HTML document. Just type html top and body tags of a document. in empty file, hit the tab, and a clean document structure are going to be generated.

Prettier

Prettier is that the preferred code formatter in internet dev at once. It permits your team's code look a similar, notwithstanding WHO wrote it. This extension makes it doable to mechanically apply Prettier and quickly format whole JS and CSS documents. If you furthermore might need to throw ESLint within the combine, there's is

Prettier - Eslint

Color Info

Small plugin that provides you numerous info concerning the colours you've got utilized in your CSS. By hovering on a color you'll see a bigger preview of however it's, further as data concerning its translation to any or all formats (hex, rgb, hsl, and cmyk).

SVG Viewer

This extension adds variety of utilities for operating with SVGs in Visual Studio Code. It makes it doable to render SVG files and see however they appear like while not having to depart the editor. There are choices for changing to PNG and generating information URI schemes.

TODO Highlight

This tool marks all TODO comments in your code, creating it easier to trace down any loose end before pushing to production. By default it's for TODO and FIXME keywords however you'll add your custom expressions likewise.

Icon Fonts

Tiny snippets for together with icon fonts in your project (from a CDN) then adding the icons themselves. The extension supports over twenty in style icon sets, together with Font awe-inspiring, Ionicons, Glyphicons, and Material style Icons.

Minify

Extension for minifying your code. It offers a ton of customization settings and the option to automatically minify on save and export to a .min file. Minify works with JavaScript, CSS, and HTML through

uglify-js

clean-css

, and

html-minifier

respectively.

Change Case

VSCode has restricted choices for reworking text. Out of the box it will solely do minuscule and majuscule transforms. This plugin adds a great deal additional commands for modifying strings, together with camelCase, kebab-case, snake_case, CONST_CASE, and others.

Regex Previewer

Useful tool for live testing your regular expressions. It works by applying the regex pattern over any document opened to the facet, highlight all the matches. kind of like RegExr however right within your editor!.

Language and Framework Packs

VSCode ships with support for an outsized range of languages. If for a few reason your programing language of alternative is not enclosed, you'll be able to transfer associate degree extension pack which is able to add autocompletion, correct indentation, and different utilities. Some net dev frameworks like like

react native

and

vue

also offer language packs.

Themes

Of course, the foremost necessary of all extensions area unit the themes. you will be watching your VSCode editor daily, why not build it additional beautiful? There area unit loads of customization plugins that amendment the colour theme and therefore the icons within the sidebar. Here area unit a number of our favorites:

One Monolai

Aglia

One Dark

Material Icon

I hope you understand the article…..

We will be happy to answer your questions on designing, developing, and deploying comprehensive enterprise web, mobile apps and customized software solutions that best fit your organization needs. As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to

get in touch with us!

#b2b marketing agency #b2b content marketing

0 notes

lakhwanabhishek · 4 years ago

Text

15 Essential Plugins for Visual Studio Code

Open-In-Browser

Quokka

Faker

CSS Peek

HTML Boilerplate

Prettier

Prettier - Eslint

Color Info

SVG Viewer

TODO Highlight

Icon Fonts

Minify

uglify-js

clean-css

, and

html-minifier

respectively.

Change Case

Regex Previewer

Language and Framework Packs

react native

and

vue

also offer language packs.

Themes

One Monolai

Aglia

One Dark

Material Icon

I hope you understand the article…..

get in touch with us!

#b2b market research companies

#b2b ecommerce

#b2bsales

#Ecommerce

0 notes

t-baba · 5 years ago

Photo

10 Must-have VS Code Extensions for JavaScript Developers

In this article, I’ll focus on a list of must-have VS Code extensions for JavaScript developers.

Visual Studio Code (VS Code) is undoubtedly the most popular, lightweight code editor today. It does borrow heavily from other popular code editors, mostly Sublime Text and Atom. However, its success mainly comes from its ability to provide better performance and stability. In addition, it also provides much-needed features like IntelliSense, which were only available in full-sized IDEs like Eclipse or Visual Studio 2017.

The power of VS Code no doubt comes from the marketplace. Thanks to the wonderful open-source community, the editor is now capable of supporting almost every programming language, framework and development technology. Support for a library or framework comes in various ways, which mainly includes snippets, syntax highlighting, Emmet and IntelliSense features for that specific technology.

VS Code Extensions by Category

For this article, I’ll focus on VS Code extensions specifically targeting JavaScript developers. Currently, there are many VS Code extensions that fit this criterion, which of course means I won’t be able to mention all of them. Instead, I’ll highlight VS Code extensions that have gained popularity and those that are indispensable for JavaScript developers. For simplicity, I’ll group them into ten specific categories.

Snippet Extensions

When you first install VS Code, it comes with a several built-in snippets for JavaScript and Typescript. Snippets help you write repetitive code quickly. However, you may find these may not be enough. You can easily create your own, or you can simply install an extension that includes a bunch of new useful snippets. A quick tip if you want snippets to show on top of suggestions is to use this configuration:

{ "editor.snippetSuggestions": "top" }

Here are some of the most popular snippet extensions for JavaScript developers. However, I would recommend you install just one for simplicity’s sake.

JavaScript (ES6) code snippets, by Charalampos Karypidis. This is currently the most popular javaScript snippet extension with over 3+ million installs to date. This extension provides ES6 syntax for JavaScript, TypeScript, HTML, React and Vue. All snippets include a final semicolon.

JavaScript (ES6) code snippets in StandardJS style, by James Vickery. This is basically a fork of the above extension for those who prefer StandardJS style convention—that is, the snippets don’t have semicolons.

JavaScript standardjs styled snippets, by capaj. Another StandardJS Styled snippets but this one is more popular with over 72k installs. Originally forked from Atom StandardJS snippets. Contains a huge collection of handy snippets and supports JavaScript, TypeScript and React.

JavaScript Snippets, by Nathan Chapman. A collection of JavaScript snippets with about 33k+ installs to date. This snippet extension supports Node.js, BDD Testing frameworks such as Mocha and Jasmine.

Atom JavaScript Snippet, by Saran Tanpituckpong. With about 26k+ installs to date, the snippets in this extension were ported from atom/language-javascript. JavaScript snippets ported from the atom/language-javascript extension.

Syntax Highlighting Extensions

The latest version of VS Code supports better syntax colorization and is now more in line with the standards set in Atom grammar. Hence, extensions such as JavaScript Atom Grammar are no longer needed.

However, we still have a few syntax highlighting extensions that are quite useful when it comes to certain types of projects and file extensions. Here’s a few:

Babel JavaScript, by Michael McDermott. With over 550k+ installs to date, this extension provides syntax highlighting for ES201x JavaScript, React, FlowType and GraphQL code.

DotENV, by 833,737. With over 833k installs to date, this extension supports syntax highlighting for environment settings — that is, .env files.

Bracket Pair Colorizer 2, by CoenraadS. With 730k+ installs, this extension highlights matching brackets with different colors, helping you identify which bracket belongs to which block.

Linter Extensions

Have you have ever gotten into a debate with your teammates over tabs vs spaces or semicolons vs no semicolons? You’ll realize that people have strong opinions about which coding style to use. Nevertheless, everyone on the same team needs to use the same coding style regardless of their opinion.

However, it’s quite common for programmers to forget which coding styling they agreed to work with. To enforce the rules, we need to use linters that compare your code with the rules you’ve established. You define your rules by picking a popular coding style such as Standard, Google, and Airbnb. You can use them as is or use a configuration file to customize the rules. VS Code doesn’t have a built-in JavaScript linter, so you’ll need to install an extension.

Here are the extensions we have available:

ESLint, by Dirk Baeumer. With over 8 million installs, this is the most popular extension providing support for the ESLint library. In order for the extension to work, your project will need ESLint packages and plugins installed. You’ll also need to specify an .eslintrc, which will specify the rules the extension will use to lint your code .

JSHint, by Dirk Baeumer. With 1.2M+ installs, this extension supports linting with the JSHint library. A .jshintrc configuration file is required for the extension to lint your code.

StandardJS – JavaScript Standard Style, by Sam Chen. This extension (259k+ installs) simply integrates JavaScript Standard Style into VS Code. You’ll need to install standard or semiStandard as a dev dependency in your project. No configuration file is required. You’ll need to disable VS Code’s built-in validator for this extension to work.

JSLint, by Andrew Hyndman. This extension provides linting with the JSLint library. You’ll need to install jslint locally or globally for the extension to work. It has 109k+ installs to date.

If you’d like an overview of available linters and their pros and cons, check out our comparison of JavaScript linting tools.

Node Package Management Extensions

Every JavaScript project needs to at least one npm package, unless you’re someone who likes doing things the hard way. Here are a few VS Code extensions that will help you work with managing and working with npm packages more easily.

npm, by egamma. With over 2.3M+ installs, this extension uses package.json to validate installed packages. If anything is missing or versions are mismatched, the extension will provide you with clickable options to fix the issue. In addition, you can also run npm scripts defined in package.json right inside the editor.

–npm IntelliSense, by Christian Kohler. With 1.9M+ installs, this extension provides autocompleting npm modules in import statements.

Path IntelliSense, by Christian Kohler. With 2.7M+ installs, this extension autocompletes filenames. It also works inside HTML and CSS files.

Node exec, by Miramac. With 168k+ installs, this extension allows you to execute the current file or your selected code with Node.js by pressing F8 on your keyboard. You can also cancel a running process by pressing F9.

View Node Package by Dominik Kundel. With 55k+ installs, this extension allows you to quickly view a Node package source and documentation while you’re working with your code.

Node Readme, by bengreenier. With 52k+ installs, this extension allows you to quickly open an npm package documentation right inside the VS Code editor as a separate tab.

Search node_modules, by Jason Nutter. By default, the node_modules folder is excluded from VS Code’s built-in search. With over 470k installs, this extension allows you to quickly navigate and open files in node_modules by traversing the folder tree.

Source: vscode-search-node-modules

Import Cost by Wix. This displays how much disk space a package is using when you import it. The extension has 562K+ installs.

Source: import-cost

Formatting Extensions

More often than not, we sometimes write code that’s out of alignment with the rest of the code. To fix this, we need to go back and fix the indentation in each line. In addition, we need to ensure braces and tags are properly formatted in a readable format. This process can quickly get tedious.

Luckily, we have extensions that can do the work for us. Please note extensions such as Prettier and Beautify can’t both be active simultaneously.

Prettier Code Formatter, by Esben Petersen. This is the most popular extension that supports formatting of JavaScript, TypeScript and CSS using Prettier. It has over 5.7 million installs to date. It’s recommended you install prettier locally as a dev dependency.

Beautify, by HookyQR. A jsBeautifier extension that supports JavaScript, JSON, CSS and HTML. It can be customized via a .jsbeautifyrc file. It’s now the second most popular formatter, with 4.4 million installs to date.

JS Refactor, by Chris Stead. This provides a number of utilities and actions for refactoring JavaScript code, such as extracting variables/methods, converting existing code to use arrow functions or template literals, and exporting functions. It has 140k+ installs to date.

JavaScript Booster, by Stephan Burguchev. This is an amazing code refactoring tool. It features several coding actions such as converting var to const or let, removing redundant else statements, and merging declaration and initialization. Largely inspired by WebStorm, it has 74k+ installs to date.

Source: vscode-javascript-booster

Continue reading 10 Must-have VS Code Extensions for JavaScript Developers on SitePoint.

by Michael Wanyoike via SitePoint https://ift.tt/2VvpsSb

#CSS3 #HTML5 Branding #HTML5 Weekly #HTMLl5 demos #Javascript Branding #Javascript Weekly #Mobile #Mo

0 notes

fripig · 6 years ago

Text

fripig 一步一步，统一项目中的编码规范（vue, vscode, vetur, prettier, eslint... #技術文章

fripig 一步一步，统一项目中的编码规范（vue, vscode, vetur, prettier, eslint... #技術文章 from fripig via IFTTT

#IFTTT #fripig #技術文章

0 notes

trial-and-spiral · 7 years ago

Text

AtomからVSCodeに乗り換えたので使ってる拡張パッケージを対応表にしてみた

年末年始にAtomの使ってるプラグインを列挙して棚卸しをしたけども、ちょっと前のMSのGitHubの買収を機に食わず嫌いしてたVSCodeを使ってみた。

ただし使うにあたってはAtomで使ってる環境と同程度のことができてくれないとダメなので調べてみた。

結果から言って今はVSCodeに乗り換えてしまった。せっかくなので使ってるAtomとVSCodeの拡張パッケージをそれぞれ対応する表にしてみた。ちなみに元々「俺のAtomは環境だ」と笑い話的に言っていたのでややAtom寄りの表になってるのはご容赦いただきたい。

使用感比較

拡張パッケージ表に行くまえに使用感を比較した所感。100%満足はしてないもののパフォーマンスの恩恵が大きく、なんとかAtomでできたことを損なうことなくVSCodeでも許容できるレベルにもっていけたのが乗り換えの決め手。

ほとんどどちらも同じような感じで差異は大きくない。ただ、プロジェクト内から文字列検索した時の結果表示がAtomのほうがエディタ部に表示されるのでわかりやすい。VSCodeだとエクスプローラー部分に表示されるのが小さくてみづらい。

またキーバインドの設定はAtomイベントが発火したのか表示できるけど、VSCodeは表示する機構がないで、コンフリクトしてるキーバインドのデバッグが非常にしづらい。

見た目のカスタマイズ

見ためのカスタマイズは完全にAtomのほうが柔軟。これはDevToolsを開ける上、設定のLESSファイルを自由に編集できる。ということは変更したい箇所のセレクタにCSSを書いてあげることで如何様にもなる。

一方VSCodeは全てではないものの主要箇所はできて、まあ必要十分かな、という感じではある。個人的にはツリービュー（エクスプローラー）の文字サイズや行の高さなどはカスタムしたいけどできないのがもどかしい。

パフォーマンス

よくAtomは遅いと言われるけど、うん、まあ否定できない。それでも一応速くはなったんだけど。あとログファイルみたいに大きなファイルを開くとビーチボールがぐるぐるしてどうしようもなくなることがある。

VSCodeは最初の表示は速い。ウインドウの起動はちょっとかかるけどAtomに比べたら軽い。またファイル表示はキビキビ開く。ただし、これはどうもLinterやシンタックスハイライトなんかは開いた後でやってるような感じ。まず表示を優先する、みたいな挙動っぽい。大きなファイルは大きすぎた時はまず警告出してくれるので助かる。

さて、以下に拡張機能を列挙していくんだけど、自分で探す場合の注意としてはVSCodeのパッケージは検索すると同名のものが出てきたりする。同名のものをフォークして上げただけ、みたいな感じっぽいけどインストールの際はちょっと注意したい。

また、見つからなかったものは[-]とかって書いてあるけど、単に検索力が足りなかったり別のパッケージの一部にその代替機能が含まれてたりする可能性はあるのでご注意されたし。

選択系、変換、入力補助（エディタ操作）

概要詳細Atom PackageVSCode Package矩形選択SublimeText的な矩形選択。見たままの四角の範囲を選択可能。Sublime-Style-Column-Selection-選択範囲を段階ごとに広げる選択範囲を文字、単語、クォートや括弧で囲んだ要素、と順々に大きくできる。expand-regionexpand-regionキャレット列のハイライト-highlight-column-キャレット行のハイライト-highlight-lineビルトイン選択した文字列のハイライト選択してるものと同じ文字列をハイライト。highlight-selected-ブラケットハイライト対応するブラケットをハイライトビルトイン-ブラケットカラーハイライト対応するブラケットごとに色をかえてわかりやすく表示bracket-colorizerBracket Pair Colorizer文字ケースの相互変換キャメルケースとスネークケースだけでなく、ケバブケースもドット記法なども幅広く対応してるのでうれしい。change-casechange-caseクォーテーションマークを相互に変換シングルクォートとダブルクォートのトグルだけでなく、設定でバッククォートも対応できる。toggle-quotesToggle Quotes二元的要素のトグル変換true/falseなどをトグルで変換。設定で対応文字列をカスタマイズ可能。togglertogglerタブ-スペース変換インデントのタブorスペースをトグル変換。tabs-to-spacesビルトインセミコロンやカンマ付与今キャレットがどの列にあろうとも現在の行末にセミコロンとカンマをつける。キーバインドで設定すると捗る。trailing-semicolontoggle semicolon行末スペース制御行末のスペースを目立たせたり自動で削除したり。Atomはスタイルをカスタムすると良い感じtrailing-spacesTrailing Spaces全角スペース制御全角スペースを強調表示。Atomはスタイルをカスタムすると良い感じ。show-ideographic-spaceEvilInspector制御文字の制御BackSpaceなど制御文字を削除するフォーマッタ。不意に紛れこむと思わぬバグを起こすのでありがたい。-Remove backspace control character連番の数字を挿入複数行にわたって一括で連番生成。sequential-numbervscode-input-sequence選択した複数行をソート選択した範囲に含まれる複数行をアルファベット順や逆順などでソートlinesSort linesカラーコードの部分だけカラー表示カラーコードになってる文字列の背景色をその色で表示。CSSとか書くときに便利。StylusやSassの変数も対応してるので重宝する。pigmentsColor Highlight正規表現補助正規表現をビジュアルで表示してくれる。regex-railroad-diagramRegex Railroad DiagramsPath入力補完Path入力補完、でもたまに邪魔なときがある気がする。autocomplete-pathsPath Intellisense列のフォーマッタオブジェクトの定義とか、連続して変数に値を入れるとき、=や:をセパレータとして左右のインデントが揃うようにしてくれるフォーマッタ。言語別のものもある。alignerBetter Alignインデントフォーマットネストした要素のインデントをうまいこと整形してくれるフォーマッタ。JSONとかも良い感じにやってくれたり。けっこういろいろ対応してる。atom-beautifyBeautify高機能マルチカーソルデフォルトより高機能なマルチカーソル。キーバインドがバッティングしやすいので要カスタム。multi-cursor-plus-キャレットの行移動補助設定した行数文だけキャレットを一気に移動する。Emacsのページ送り的な送り用途として使える。line-jumperline-jumper

ファイル、タブ、ペイン操作系

概要詳細Atom PackageVSCode Packageペイン自動最大化複数Paneで分割してる時にアクティブなペインを自動的にほぼ最大化する。フォーカスしたペインを自動的に最大化したりもできる。hey-pane-ツリービューのフィルタツリービューで表示しているファイルをインクリメンタルに絞り込む。tree-view-filter-タブの規制最大タブ数の設定制御。設定数を越えると古いタブから自動的に閉じて入れ変わる挙動になる。設定でピン止めしたファイルや、未コミットファイル除外したりもできる。たくさんファイル開きすぎてわかんなくなっちゃうので。zentabs-メソッド定義などのツリー表示定義されたメソッド、変数などをサイドドロワーにツリー表示symbols-tree-viewビルトインTODOコメントの抽出プロジェクト内に存在するTODOやNOTEなどのコメントを抽出して表示。todo-showTodo TreeGHQ連携CLIリポジトリ管理ツールghqの管理下にあるプロジェクトのショートカット。全てのプロジェクトがGit管理されていれば、プロジェクトマネージャーはこれだけで十分だと思う。douglasvscode-ghq変更ファイルの強調ツリービュー（エクスプローラー）上でGitステータス▽による色分け表示する。追加ファイルや変更したファイルとかが視覚的にわかりやすいし、未コミットのファイルもみつけやすい。tree-view-git-statusビルトインファイルエンコーディング判別エンコーディングの自動判別。auto-encodingビルトインファイルエンコーディング変換マルチバイトのファイルをutf-8に変換。convert-to-utf8-FuzzyGrepファイル検索プロジェクト内をag的なfuzzyGrepしてファイル表示。atom-fuzzy-grep-ディレクトリごとのファイル操作ディレクトリごとに絞り込みでファイルを開ける、フルキーボードで階層ごとに掘っていく場合に便利。advanced-open-file-Expose風タブ操作開いてるタブをmacのexpose的に表示、切り替えできるやつ。expose-

HyperClick系

概要詳細Atom PackageVSCode PackageHyperClickコード中のいろんな要素がクリッカブルになる。キーバインドにも対応していて対象の文字列にキャレットがあるときはキー操作でも動作する。**-hyperclick系のアドオンとかで拡張可能。言語特化のアドオンは後述の言語別のところで。hyperclick-HyperClickのURL対応URLをクリッカブルにしてデフォルトブラウザで開けるようになる。hyperlink-hyperclickビルトイン

ミニマップ

概要詳細Atom PackageVSCode PackageMinimapサイドドロワーにコード全体をざっと単純化して見わたせるようなやつを表示。他のパッケージで拡張可能。minimapビルトインMinimap選択文字列ハイライトMinimap内で選択した文字を全てハイライト。minimap-highlight-selectedselect highlight in minimapMinimapを自動で隠すミニマップをスクロールしてないとき以外は自動的に非表示minimap-autohider-Mimimap内検索文字列ハイライトミニマップ内で検索文字列を全てハイライト。minimap-find-and-replaceビルトインMinimapカラーコード表示ミニマップ内でカラーコード部分をカラー表示。minimap-pigments-

その他、機能拡張

概要詳細Atom PackageVSCode Package多人数同時編集他の人とつなげて同時にシェアしながらコーディングできる。モブプロ、ペアプロなどでものすごい活躍する。teletypeVS Live ShareAtomキーマップコンフィグAtomでデフォルトのキーマップに一括で変更するビルトインAtom Keymapコーディングフォーマットの統一EditorConfigの対応。プロジェクトルートに.editorconfigという設定ファイルを置いて制御。editorconfigEditorConfig for VS Code設定の共有、同期GitHubGist経由でエディタの設定、インストールしているアドオン情報を複数端末で同期する。sync-settingsSettings Syncノートテイキング検索しやすいノートシステムをエディタに組み込み、メモやスニペットなどの一元管理を自分のカスタマイズしたエディタで編集できるのは強み。Atom版はnotational-velocityライクでかなり使いやすい。atom-notesVSNotesブラウザ連携同名のGoogleChrome拡張をブラウザに入れることで、ブラウザで開いてるページのテキストエリアを同期的にエディタで編集できるようになる。例えばPull RequestなどMarkdown対応のテキストエリアをエディタで編集できるのはかなり便利。atomic-chromeGhostTextターミナルエディタ内でターミナルを動作させるplatformio-ide-terminalビルトインCSVエディタエディタからCSVを表計算アプリケーションのように表示、編集できるtablrExcel Viewer拡張パッケージ管理パッケージにアップデートがあったら自動でアップデートする。ちょいちょい自分で確認しなくていいので楽。auto-update-packagesビルトインファイルアイコンツリービュー（エクスプローラー）やタブにファイルのアイコンを表示して視認性を上げる。VSCodeでは各種テーマでさらにカスタム可能。file-iconsビルトインファイルタイプの判別補助自動で判別されるファイルタイプのルールをカスタマイズを楽にする。file-types-差分表示、補助Paneで分割してDiff表示、見やすい。しかも保存してない状態でもDiffとれるので、長大な文字列とか大きめなオブジェクトを一時的に比較するときも重宝する。split-diffPartial Diffコードプリプロセスプリプロセッサ言語から元言語へ変換。preview-ステータスアイコンステータスバーに状況表示アイコンをプラス。確かAtom用のLinterと一緒に入ってくるはず。busy-signal-ウィンドウタイトルのカスタマイズAtomのウィンドウに表示されるタイトルのルールを変更できるようになる。上手く好きなようにファイル名の表示とかにカスタマイズすると地味に便利。custom-title-定義元にジャンプメソッドの定義元にジャンプできるようになる。goto-definition-ステータスバーにファイル名表示現在開いているファイル名とファイルパスをステータスバーに表示ビルトインActive File In StatusBar

Linter系（Atomのみ）

概要詳細Atom PackageVSCode PackageLinterLinter機能。各言語用のPackageを別途追加が必要。各言語用のLintは後述。linter-Linter表示Linter表示用UI。たぶんLinter入れると入ってくるはず。linter-ui-default-

各言語とか用途とか別

Git

概要詳細Atom PackageVSCode PackageGit総合サポートGit周りのこといろいろ-GitLens — Git superchargedGit履歴表示Git logビューアgit-logGit HistoryGit変更内容アイコンAtomにビルトインのステータスバーにGitのファイル変更状況アイコンを表示する-Git Indicatorsgitignoreサポートgitignore用のシンタックスハイライト-gitignoreGistGitHubのGistを編集したりアップロードしたり、挿入したり。Gist系はいくつかあったけどこれが一番使いやすかった。gist-Git Blame表示行ごとにGitで変更した人を表示する。git-blameGitLens — Git superchargedGit操作ショートカットよく使うGit操作をAtomから直でできる、Atomのコマンド補完が効くので便利、基本的なgit操作はこれだけでいける。ビルトインのものでも十分だがあると便利git-plus-コンフリクトのサポートGitでmergeしようとしてコンフリクトしたときの編集サポート。merge-conflictsビルトインホスティングサービス対応GitHubなどのホスティングサービスを開いたり、プルリクエストページを開いたりできる。GitHubだけでなくBitbucketなど他のサービスにも対応しててうれしい-Open in GitHub, Bitbucket, Gitlab, VisualStudio.com

Markdown

概要詳細Atom PackageVSCode PackageMarkdown表示の拡張デフォルトのMarkdownプレビューより高機能なプレビュー、TOCやプレゼンモードもあったりする。目次機能もあったり、いろいろと便利。markdown-preview-enhancedMarkdown Preview Enhanced入力補助Markdownの全般的な入力補助。とりあえず入れてる。markdown-writerMarkdown All in One目次自動生成編集中のMarkdownの目次を自動生成Markdown TOCMarkdown All in Oneテーブル記法補助Markdownのテーブル記法編集補助、うまいこと縦のカラム表示を整えてくれる。markdown-table-editorMarkdown All in Oneテーブル記法補助2別のMarkdownのテーブル記法編集補助Markdown Table FormatterMarkdown All in OneMarkdown目次機能ドロワーやエクスプローラーに編集中のMarkdownの目次をページ内リンク付きで表示。document-outlineビルトインタスク記法のトグルMarkdownのチェックボックス記法のチェック状態のトグル変換。そんなに使わないけどいちいちキャレットを移動するのが面倒なので。toggle-markdown-taskMarkdown Checkboxesフォーマッタ番号付きリスト記法の番号振りなおしなど、フォーマッタ。tidy-markdown-シンタックスハイライトAtomデフォルトのものより高機能なハイライタ。language-markdown-TextLint特に日本語に強い自然言語用のLinter、textlintをAtomで使えるように。Markdown以外でも効く。linter-textlintvscode-textlint

JSON

概要詳細Atom PackageVSCode Packageシンタックスハイライト（階層）JSONファイルを階層によってカラーリングを変えて視認性を上げる。atom-json-color-フォーマッタJSONファイルの整形フォーマッタ。pretty-jsonJSON ToolsLinterJSON用のLinterアドオン。linter-jsonlint-ソートJSONオブジェクトをアルファベット順などでソートできる。-Sort JSON objects

Ruby

概要詳細Atom PackageVSCode Package総合サポート-RubyRubyHamlサポートhaml用の言語ファイル。language-hamlRuby HamlSlimサポートSlim用の言語ファイル。language-slimSlimRspecサポートRspec（Rubyのテストフレームワーク）用の言語ファイル。language-rspecrspec-snippetsRablサポートRabl（RubyOnRails用のJSONやxmlに特化したテンプレートサポートGem）用の言語ファイル。language-rabl-Linter(RuboCop)Rubocop用のLinterアドオン。linter-rubocopruby-rubocopLinter(erb)erb用Linterlinter-erb-Linter(Haml)Haml用Linterlinter-haml-Linter(Slim)Slim用Linterlinter-slim-入力補完Ruby用の入力補完。別途Solagraph Gemのインストールが必要。autocomplete-rubyRuby Solargraph自動修正Rubocopルールに従って自動修正。rubocop-auto-correct-フォーマッタRuby用フォーマッタのrufoをエディタから実行。JSのprettier用のプラグインのほうが主流になりそうな感じ。rufo-atomrufo (Ruby formatter)Railsサポート--Ruby on RailsRailsパーシャルビューサポートRailsのパーシャルビューの自動補完autocomplete-rails-partial-Rspecファイルを開く現在開いてるファイルに対応したRspecのファイルを開く。rails-open-rspec-Rspecの実行エディタからRspecをrun。rspecRails Run Specsブロック文法の補助do,if,begenとendなどの対になるブロック要素をハイライト。ruby-block-i18nサポートRailsのi18n用のAutocompleteとHyperClickアドオンのセットrails-i18n-plus-Rails補助Rails用のスニペット集。rails-snippetsRuby on RailsRails補助（ファイル）Model,View,Controllerなど対応するファイル同士を素早く開けるようにする。rails-transporter-

JavaScript系(Node.jsやメタ言語、フレームワーク含む)

ちなみにPrettier系入れずにプロジェクトにESlintと統合するeslint-plugin-pretteirを使って統合している。

概要詳細Atom PackageVSCode PackageTypeScriptサポートTypeScriptの言語ファイルか補完や便利機能まで、IDE的サポート。atom-typescriptビルトインVue.jsサポートVue.js用の言語ファイル。language-vueVeturVuc.js入力補完Vue.js用Autocompleteアドオン。vue2-autocompleteVeturESlintJavaScript用のLinterであるEslintサポート、prettierと連携も可。linter-eslintESLintJS用HyperClickJavaScript用のHyperClickアドオン。js-hyperclick-Vue.js用HyperClickアドオンVue.js用HyperClickアドオン。vue-hyperclick-JestサポートJS用テストフレームワークJestのサポート-Jest

HTML系（メタ言語含む）

概要詳細Atom PackageVSCode PackagePugサポート-language-pugPug (Jade) snippetsHTML用LinterHTML用Linterアドオン。linter-htmlhint-Pug用LinterPug用Linterアドオン。linter-pug-HTMLタグ補完HTMLの閉じタグのショートカットと補完。Pugで書けばいらないんだけどね。tagAuto Close TagEmmetサポートhtml,css（プリプロセッサ含む）の強力なスニペット集。emmetビルトインインデント記法サポートJade(pug)やStylus,Sassのインデントベース記法の環境で、現在のキャレットの位置がどの要素のネスト中なのかツールチップで表示。indent-tooltip-

CSS系（メタ言語含む）

概要詳細Atom PackageVSCode PackageStylusサポートStylus用の言語ファイルとスニペット集。Styluslanguage-stylusStylus自動補完Stylus用のAutocompleteアドオン。autocomplete-css-with-stylus-support-StylusフォーマッタStylus用フォーマッタSupremacyサポート、かなり柔軟な設定が可能。-Manta’s Stylus SupremacyStylus用LinterStylus用のLinterアドオン。linter-stylintStylintCSS用LinterCSS用のLinterアドオン。linter-stylelintstylelintSass用LinterSCSS(SASS含む）のLinterアドオン。linter-scss-lintSass Lint

PUML

UMLをテキストから表現したもの。細かいレイアウトは難しいもののテキストならGit管理もできるし素早くかけるので覚えてよかった。

概要詳細Atom PackageVSCode PackagePlantUMLサポートPlantUMLの言語ファイルlanguage-plantumlPlantUMLPlantUMLビューアPlantUML用のUMLを表示plantuml-viewerPlantUML

その他の言語系

概要詳細Atom PackageVSCode PackageApacheApacheのコンフィグ用language-apacheApache Confnginxnginxのコンフィグ用language-nginxnginx.confLispLispサポートlanguage-lispLispenvファイル環境変数を設定するenvファイルのシンタックスハイライトDotENV-

おしまいに

VSCodeに乗り換えたものの、今もAtomは好きだし、なんとなくVSCodeは好きになれない。もしかしたらあるイベントで好きでAtom使ってるところにかなり無理にVSCodeを勧められた経験からかもしれない。（やれ補完がどうとか。それはVSCodeの機能ではなくLanguage Serverだ）

Web上でもVSCode推しみたいのを良く見る。しかもAtomを貶めてまで。エディタは宗派で戦争になるためそういう推し方は好きじゃないんだよなぁ。あ、あれだインド行った時、自分の旅の一部としてとても楽しかったけど、インド推ししてる日本人の方々をどうも好きになれなかった感じと似ている。

なんにせよどんなエディタを使おうにもこういう拡張が充実してきてみんなが平和に好きなエディタを心地良く使う世の中がいいよね。

from Trial and Spiral https://blog.solunita.net/my-favorite-packages-for-atom-and-vscode/

0 notes

mbaljeetsingh · 7 years ago

Text

My Favorite Front-End Development Extensions for Visual Studio Code

Visual Studio Code is one of the newest kids on the IDE “block” and it’s making a lot of noise. It’s taken a little while to gain traction, perhaps because it’s one of Microsoft’s few open source products, but it’s taken the open source community by storm. Developers who once swore their allegiance to Sublime Text 3 and Atom are slowly being converted by the power and simplicity of VS Code–not to mention its incredible library of extensions.

I began my own coding life on Sublime Text 3, moved to Atom, then PHPStorm, then after my subscription expired with JetBrains I thought I’d give VS Code a try. It continues to make my life easier and by doing so, makes me a better developer.

This introduction will take you from zero to hero, getting you up and running with VS Code, focusing specifically on my favorite front-end development extensions, making sure that every aspect of your workflow is covered.

Assumptions

I’m going to assume a few points for this article:

Your front-end development stack is not opinionated. I’m going to assume that at some point you will have the need for jQuery, ES6, React, Vue, PostCSS, or whatever floats your boat.

You’re using Git for version control.

You already have Node and NPM installed and setup correctly.

Some of the extensions listed below require some configuration outside of VS Code, I’ll let you know what does and doesn’t, but if you need any help, feel free to ask!

Installing

First things first, if you don’t already have VS Code installed, head over to Visual Studio Code’s website. VS Code is cross-platform so our configurations will work on Windows, Mac and Linux.

VS Code is also available as a Homebrew Cask package on Mac: brew cask install visual-studio-code

A step that I find a lot of tutorials often leave out is the ability to execute VS Code from the terminal. There are a few ways of doing this. If you already have a .bash_profile setup you can add this:

export PATH="$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"

Or, for a more cross platform approach, hit the Command Palette shortcut: Shift + Command + P and type the word shell - this will give you an option called: Install code command in PATH - hit enter and you’re done. Now, you can launch files and folders anywhere from the terminal by typing: code path/to/file/or/dir

Linting

Lint your code–it’s the best way to stop errors before they cause you any undue stress!

ESLint

If you’re running the latest version of ECMA Script, then ESLint is for you. This extension integrates the ESLint pattern recognizer straight into VS Code and aids you with common mistakes that developers make with the new syntax. It does require that you have the NPM ESLint package installed either locally in your project or globally.

SASS Lint

For those of you who enjoy writing more programmatic Sass, Sass Lint provides you with an easy to use set of configurations for writing standards-compliant Sass.

JSHint

JS Hint is another great JavaScript Linter that aids you with logic, syntax and more, depending on your configuration.

TSLint

If you’re a TypeScript fan, then the TSLint extension is your best friend. With TypeScript being a precompiled language, you have full control over what the compiler lints for you as well as auto formatting options.

These extensions all offer Git friendly ways of managing custom / shared configurations between developers on your team namely in .eslintrc and .sass-lint.yml or .jshintrc

I’ve purposely left our HTML Linters here. Whereas I’ll use an extension like Beautify for formatting and tabbing my HTML according to an .editorconfig I find that HTML Linters perform quite poorly. They don’t consider semantics and tend to do a bad job of helping you with accessibility concerns. As the meaning of HTML can be relatively ambiguous, it’s better to use a set of tools that do smaller jobs.

To extend the HTML functionality in VS Code I use the following:

AutoClose Tag

It could use a bit of improvement, but I always liked Sublime Text 3’s auto closing tag functionality. The above mentioned extension will help you out with this in VS Code.

AutoRename Tag

This is another useful HTML extension which allows users to click inside an HTML element and rename it, while simultaneously renaming the closing tag.

Automation

I moved away from Grunt sometime ago, but coincidentally there don’t seem to be any Grunt extensions on the marketplace, at least not with enough traction to make much of an impact. The extensions below are mainly focused on Gulp and Webpack as they seem to be leading the race in the task management world right now.

Gulp Snippets

This extension allows you to use the Command Palette in VS Code for easily injecting useful Gulp configurations into your Gulpfile.js; a must have if you’re still a little shaky about setting up Gulp.

Webpack

Setting up Webpack can be one of the scariest tasks a developer has to commit to. The Webpack extension for VS Code takes the fear out of it by providing you with a minimal webpack.config.js to start your project. If you’re a progress person, and you don’t like being left in the dark while your Terminal thinks about things, then the Webpack Progress extension is for you. It provides a nice progress bar for when Webpack is doing its thing.

Git

One of the most powerful extensions for version control in VS Code is:

Git Lens

For newcomers and advanced users alike, Git Lens is powerhouse. It makes an easy job of making Git and its many intricacies more manageable and visual. I’ve enjoyed using it so much that other than using the Terminal to add, commit, branch and push, I’ve completely scrapped Git GUI’s.

Almost every setting is customizable. Git Lens provides real-time feedback of Git data while you’re coding. Want to know who wrote that function that isn’t working? Want to see how much the code has changed over the last few commits? Not sure how to handle a merge conflict in a file that you never wrote, or have little context of? Git Lens handles this all for you.

Language Support and Intellisense

Where as other IDEs have full on support for the majority of languages, VS Code leaves it up to you for the most part. As and when you require it, you can add Language Support for whatever technology you’re dealing with, out-of-the-box HTML and CSS, as well as JavaScript are provided, but if you have need for Python it’s just a click away. In my workflow I use Python every so often, but Node was a big thing for me.

Intellisense essentially takes care of completions. You can hit tab or hover over a file path, for instance, and VS Code will do the hard work for you.

Babel ES6 / ES7

If you’re one of those people that loves using new technologies in your workflow and you’re crazy about the new edition of JavaScript then the Babel ES6 / ES7 linter is for you.

File System Path

This is a brilliant extension that autocompletes / suggests file paths while you’re typing. If you come from a PHPStorm background, you’ll know the feeling!

NPM

A great extension when using require() or import {} in Node.js, this extension autocompletes file paths to Node Modules.

CSS Class Names

This is a very useful extension for auto completing CSS class names defined in your linked CSS files. If you’re a Bootstrap, Foundation or just a framework fan in general, this will save you a lot of time!

SCSS

For the precompiled CSS fans, this extension makes intellisense possible for imports, mixins, includes and functions in SCSS.

PostCSS

If you’ve yet to come across PostCSS then you’re missing out. It’s an advanced and extremely forward thinking set of plugins for CSS that makes CSS a lot more powerful. I use two PostCSS extensions: Syntax and Sorting; one enables syntax support for new CSS Level 4 modules like nesting and the other allows me to sort CSS properties alphabetically.

Vue

While not really Intellisense alone this is a great extension for Vue.js development. It’s an all-in-one solution for adding linting, intellisense, and formatting to Vue.js development and already includes some of the extensions I've mentioned above.

React / React Native

This is a full solution for developing React Native applications. By default, VSCode has a ton of support built in for React.

Accessibility and Health

You spend a lot of time in front of your IDE, so making sure it’s easy on the eyes and legible is just as important as any other aspect I’ve mentioned.

VS Code Icons

First, get some folder/file icons so that you can easily distinguish the files you’re using.

Cobalt 2 Theme from Wes Bos

Cobalt 2 is not too dark, not too light, and has great contrast for an editor theme. It also has a corresponding colour setup for ZSH Terminals.

Dash

If you haven’t heard of Dash, it should be your new best friend. Dash is an API documentation app for Mac, but this extension plugs right into VS Code. By clicking any method, it will open up Dash to the respective page. The same plugin supports Zeal which is a Windows and Linux alternative.

Formatting

Beautify

As I mentioned earlier, the Beautify extension is a great tool if you’re adamant about code formatting and editor standardization. It also allows you to set a .jsbeautifyrc file which you can commit to Git repos for collaboration. Beautify can also be used as a replacement for .editorconfig if you don’t support it. Beautify formats JS, CSS, Sass, JSON and HTML.

EditorConfig

More and more IDEs are providing support for EditorConfig, which allows you to include an .editorconfig in your project repos. This gives your fellow developers IDEs and linters to read from one file to standardize tabbing and spacing as well as line ending across projects.

Prettier

For a more robust solution, try out Prettier. Prettier follows the same configuration paradigm as ESLint, providing you with a .prettierrc file which an be committed to repositories. It will also read from the .editorconfig file if it exists. In fact you can get rid of ESLint and Sass Lint and use Prettier as your one stop solution. It has its own extensions for EsLint, StyleLint and more.

Terminal

I recently moved over to ZSH which has completely transformed my terminal experience. Whilst not being a direct extension of VS Code, it can be integrated through the Terminal pane. I had to do quite a bit of configuration to get it working on Mac, especially with colors and themes.

ZSH features functionality like tab completion for directories, files, Git branches and more. You can read more about setting up ZSH on the Github repo or leave me a message in the comments below if you’d like to learn more.

Debugging

Visual Studio Code comes with Debugging JavaScript right out of the box. You can take it a step further using the following extensions:

Debugger for Chrome

This extension allows a direct sync between the VS Code Debugger and Chrome Developer Tools allowing you to set breakpoints and jump straight into the code.

Conclusion

That about wraps up my extensions setup for Visual Studio Code–which are your personal favorites? Before I go though, don’t forget that coding should be fun; you may need some tunes to help you along. The Spotify extension adds a tiny inline media player to the VS Code UI.

More Visual Studio Code on Tuts+

Visual Studio

Visual Studio Code: My New Favorite Code Editor

Adi Purdila

Visual Studio Code

Essential Extensions for Visual Studio Code

Craig Campbell

via Envato Tuts+ Code http://ift.tt/2oeCvWZ

#IFTTT #Feedly

0 notes