working-environment

I'm a Full-stack Javascript developer. And this my working environment. I have created this list for myself. But I'll be glad if it will be useful to you.

Every day sites or online tools

Url	Description
gitbook.com	For knowledge base and documentations.
github.com	For explore new projects, publish my open-source projects...
npms.io	For search node.js packages.
npmsearch.com	For search node.js packages.
getcloudapp.com	For share screenshots.

Primary Browser: Google Chrome

Extensions:

Name	Description
Google translate	for translate selected text or full page.
JSON formatter	for preview formatted JSON data.
React Developer Tools	for develop React.js applications.
Redux DevTools	for debug Redux state in React.js applications.
RSS Feed Reader	for read news from blogs.

Text editor for code: Sublime Text 3

Hotkeys

Hotkey	Description
ALT + TAB	Open Tab Browser.
CMD + P	Open popup with command palette.
CMD + R	Open popup to quick browse the function defined in the opened file.
CMD + SHIFT + A	Create screenshot with cloudapp.
CMD + SHIFT + R	Save and refresh active browser window.
CMD + SHIFT + S	Sort selected lines.
CTRL + ALT + F	Format javascript code in standard style.
CTRL + ALT + SHIFT + T	Format selected lines or the entire document.
CTRL + C	Show color picker in Sketch.
select text + CMD + ;	Go to variable.
select text + CMD + P	Go to file.
select text + CMD + R	Go to function.

Text editor for code: Web Storm

Hotkeys

Hotkey	Description
SHIFT + ALT + L	Sort lines
ALT + UP	Select successively increasing code block
ALT + DOWN	Decrease current selection to previous state

Installed Packages:

Name	Description
Align Tab	An alignment plugin using regular expression.
All Autocomplete	Extends the default autocomplete to find matches in all open files.
Babel	Syntax definitions for ES6 JavaScript with React JSX extensions.
Bracket Highlighter	Bracket and tag highlighter.
Browser Refresh	Save the file you are working on and refresh your browser with one keystroke.
Default File Type	Package which automatically sets the syntax for new files.
Doc Blockr	Simplifies writing DocBlock comments in Javascript, PHP, CoffeeScript, Actionscript, C & C++.
Editor Config	Helps developers maintain consistent coding styles between different editors.
Git Gutter	Plugin to see git diff in gutter.
Git	Plugin for some git integration into sublime text.
Gitignore	Plugin for fetching gitignore boilerplates from the collection of gitignore boilerplates by Github.
Jade	A comprehensive textmate / sublime text bundle for the Jade template language.
LESS	LESS syntax highlighting for Sublime Text.
Markdown Extended	Markdown syntax highlighter for Sublime Text, with extended support for GFM fenced code blocks, with language-specific syntax highlighting.
Markdown Preview	Preview and build markdown files.
Markdown Table Formatter	Sublime Text 3 plugin for formatting markdown table.
Material Theme	Material Theme, the most epic theme for Sublime Text 3 by Mattia Astorino.
QuickGotoAnything	Sublime Text Plugin to quick scroll to function/variable or quick open file, It use selected word.
Ruby Slim	A Sublime Text bundle for Slim.
Sass	Sass support for Sublime Text.
Side Bar Enhancements	Enhancements to sidebar. Files and folders.
StandardFormat	Runs standard-format against the javascript in your ST3 window on save or manually.
Stylus	Stylus Package for Sublime Text.
SublimeLinter-annotations	SublimeLinter 3 plugin that marks annotations such as TODO, FIXME, etc.
SublimeLinter-contrib-eslint	This linter plugin for SublimeLinter provides an interface to ESLint.
SublimeLinter-contrib-pug-lint	SublimeLinter plugin for Pug/Jade.
SublimeLinter-contrib-sass-lint	SublimeLinter plugin for Sass/SCSS syntax, using sass-lint (node.js).
SublimeLinter-contrib-scss-lint	SublimeLinter plugin for Sass scss syntax, using scss-lint.
SublimeLinter-contrib-standard	This linter plugin for SublimeLinter provides an interface to standard.
SublimeLinter-csslint	SublimeLinter plugin for CSS, using csslint.
SublimeLinter-haml	SublimeLinter 3 plugin for Haml, using haml -c.
SublimeLinter-json	SublimeLinter plugin for JSON.
SublimeLinter-slim-lint	SublimeLinter plugin for slim templates, using slim-lint.
SublimeLinter	Interactive code linting framework for Sublime Text 3.
Whitespace	Remove Trailing Whitespace on file save.
Zen Tabs	Set opened tabs limit (default 10) and when you will open 11th tab the oldest one will be closed.

Install linters

npm install -g csslint
npm install -g pug-lint
npm install -g sass-lint
npm install -g standard

npm install -g eslint-config-react-app@0.3.0 
npm install -g eslint@3.8.1 
npm install -g babel-eslint@7.0.0 
npm install -g eslint-plugin-react@6.4.1 
npm install -g eslint-plugin-import@2.0.1 
npm install -g eslint-plugin-jsx-a11y@2.2.3 
npm install -g eslint-plugin-flowtype@2.21.0

gem install haml
gem install scss_lint
gem install slim_lint

Terminal: iTerm2

Color theme:

• iterm2-snazzy

Utilities

Name	Description
GitBook CLI	CLI to generate books and documentation using gitbook.
GitBook Editor	The Editor brings the GitBook workflow you love to your desktop.
jsinspect	Detect copy-pasted and structurally similar code
n	Node.js version management.
ngrok	Secure tunnels to localhost.
node-uuid	Yarn is a package manager.
nodemon	Watch the files and automatically restart application.
now	Realtime global deployments.
npm-check-updates	Find newer versions of dependencies than what your package.json.
pm2	Production process manager for Node.js apps.
Postman	Postman helps me develop APIs faster.
serve	Single-command HTTP directory listing and file serving.
soundnode	An opensource SoundCloud app for desktop.
spectacle	Spectacle allows you to organize your windows without using a mouse.
surge.sh	Static web publishing for Front-End Developers.
yarn	Yarn is a package manager.

CLI commands

jsinpect                  # detect copy-pasted code
n latest                  # install latest node.js       
ncu                       # check outdated packages
ngrok http 3000           # secure public URL for port 3000 web server
nodemon app.js            # run node.js application with watching changes
now                       # deploy project to now.sh
serve                     # run a static server in the current directory 
surge                     # deploy project to surge.sh
uuid                      # generate unique id

Install utilities

npm install -g gitbook-cli
npm install -g jsinpect
npm install -g n
npm install -g ngrok
npm install -g node-uuid
npm install -g nodemon
npm install -g now
npm install -g npm-check-updates
npm install -g pm2
npm install -g serve
npm install -g surge