These are the packages I find the most useful.
Package Control makes them easy to install and improves your workflow by a lot.
Advanced New File
Here are some very useful shortcuts I use all the time. I'm working on Windows, but for Mac they should be about the same when using
Cmd instead of
|Ctrl + Shift + D||Copy and paste the current line.|
|Ctrl + Shift + G||Wrap the current selection with an HTML-Tag.|
|Alt + .||Close the preceding open tag.|
|Ctrl + K, Ctrl + B||Show/hide the sidebar.|
|Ctrl + D||Find and expand the current selection.|
|Ctrl + Shift + V||Paste and indent.|
|Ctrl + Shift + Up/Down||Move the current line/selection up/down.|
|Ctrl + G||Jump to a specific line number.|
|Ctrl + P||Go to a specific file.|
|Ctrl + L||Select line.|
|Ctrl + Shift + A||Expand selection to brackets.|
These are some of the user settings I added under
Preferences > Settings-User.
|"bold_folder_labels": true||The folder labels in your sidebar are displayed in bold, making them more distinguishable from the files.|
|"highlight_modified_tabs": true||Highlight tabs that have not been saved yet.|
|"scroll_past_end": true||Enables you to scroll past the last line of your file.|
|"match_brackets": true||Match your open bracket directly with a closing one while typing.|
|"tab_size": 4||This underlines your indentations a bit more.|
|"trim_trailing_white_space_on_save": true||Your whitespaces will be trimmed on save.|
|"folder_exclude_patterns": [".sass-cache", "node_modules", ".git"]||This will ignore some folders and files when pressing Ctrl+P to search for a file.|
Here's the theme I use. It's a flat theme that comes with a nice color scheme as well:
The boilerplate I use is based on the HTML5 boilerplate. I modified it and added my personal folder structure to suit my needs. It is available on Github.
Working with Gulp and trying to use a meaningful CSS naming and structuring methodology I came up with the following folder structure:
dist folder is the one you upload on a server when deploying your project. Here are all minified and compressed files and images, automatically created by Gulp.
Here you can read more about CSS naming methodologies:
This is how my
gulpfile.js looks like.
dist/js folders. The only thing I have to do when I start coding is to navigate to the project folder and type
gulp watch in the command line.
I switched to Cmder as an alternative to the Windows Console, adding some really neat features like tabs and colors. It can be found here:
These are the steps for installing Gulp when using my boilerplate:
|npm install -g gulp-cli||Install the gulp command line interface globally on your pc.|
|npm install --save-dev gulp||Install the gulp dev dependendy in your project.|
|npm install||Install the dev dependencies specified in the |
For any further information go to the Gulp Github repository: