This repository contains all the important Sublime Settings for collaborating with Digitoimisto Dude Oy. Copy, edit or overwrite desired files to your to Packages/User/ (full path on macOS: ~/Library/Application Support/Sublime Text 3/Packages/User/.
- Settings - Core settings
- Snippets - Easy snippets via Tab completion, currently active for SCSS:
jeet,cover,block,media,stack,mobile - Keymaps - Common key combinations for macOS
- Linters - Error reporting settings for PHP and SCSS
- Themes - Custom themes for Sublime Text 3. Note: copy
tasks-markdown.hidden-tmThemetoPackages/root directory
- Copy all files from directories above to your
Packages/User/folder. - Install Package Control (Installation instructions)
- Set up packages (below)
We try to keep this list as up to date as possible.
- All Autocomplete
- BracketHighlighter
- Color Highlight
- EditorConfig
- FileHeader
- Generic Config
- GitGutter
- JavaScript Next - ES6 Syntax
- MarkdownEditing
- nginx
- PlainTasks
- ProjectManager
- Status Bar File Size
- Stylefmt
- SublimeCodeIntel
- SublimeLinter
- SublimeLinter-scss-lint
- SublimeLinter-phpcs
- SVGO
- Syntax-highlighting-for-Sass-legacy
- Theme - Spacegray
Press Cmd + Shift + P, type Package Control: Install Package (or just "install") and install following. If there's no "Setting up", only thing you need to do is install package and that's it.
Why we use it: This package extends Sublime autocompletion to find matches in all open files of the current window.
Why we use it: Bracket Highlighter matches a variety of brackets such as: [], (), {}, "", '', <tag></tag>, and even custom brackets in Sublime Text 3. This helps to see easier where code starts and ends.
Why we use it: Shows color codes (like "#ffffff", 0xffffff "rgb(255, 255, 255)", "white", hsl(0, 0%, 100%), etc.) with their real color as the background and/or gutter icons. Sometimes it's hard to say which color is which from just color code only.
Why we use it: EditorConfig helps developers maintain consistent coding styles between different editors. When your .editorconfig file is in place in the project, every time you save you get indents and whitespaces removed etc. You will get .editorconfig file automatically if you use dudestack or air-light, otherwise get it here.
Why we use it: FileHeader makes it easier to create new file with initial contents. It also can add new header to an existed file or directory. This ensures every developer knows who and when file has been edited, doesn't have to check out git commits all the time.
Setting up: Copy file FileHeader.sublime-settings (comes with all the settings with this repo) to your Packages/User/, edit your mac username in place to that file, then copy all the templates in fileheaders folder to your Packages/FileHeader/template/ directory, backup and override existing.
Why we use it: Generic highlighting of the configuration files for Sublime Text 2 and Sublime Text 3. Mainly for sysadmins.
Why we use it: This plugin helps us to see git diff directly in the editor gutter. That way we can see modified time and user each row of the file.
Why we use it: Better JavaScript language definition for TextMate and SublimeText. This builds on the language files commonly used and adds more fine grained matching and also includes new features from ECMAScript 6 like modules, succinct methods, arrow functions, classes, generators, and accessors (ES5).
Why we use it: Markdown plugin for Sublime Text. Provides a decent Markdown color scheme (light and dark) with more robust syntax highlighting and useful Markdown editing features for Sublime Text. 3 flavors are supported: Standard Markdown, GitHub flavored Markdown, MultiMarkdown. Optional, only for people who use markdown in documentation.
Why we use it: Improved syntax support for Nginx configuration files. Only for sysadmins.
Why we use it: An opinionated todo-list plugin for Sublime Text editor. We use this for temporary checklists that are not worth to add to our team todo or project manager. These can be todolists that are inside the project, Dropbox or other places and can be run, checked and saved to file after completion.
Setting up: Install and activate, but please see Contents part 5 in themes, you need to copy PlainTasks markdown theme to a different place.
Why we use it: Don't have any idea what *.sublime-project and *.sublime-workspace are doing? Forget where the project files are? Don't worry, Project Manager will help organizing the project files by putting them in a centralized location. (It is inspired by Atom's Project Manager, but Atom's Project Manager is inspired by the built-in Sublime Text Project Manager, so there is a circular reasoning here).
Setting up: Install and activate. Sublime keymap file you copied to your Packages/User/ should already contain a keymap to open project, it's Cmd + Shift + O ({ "keys": ["super+shift+o"], "command": "project_manager", "args": {"action": "new"}},).
To start a new project, open folder with Sublime Text or subl -n ~/Projects/projectname command, then type Cmd + Shift + P and choose Project Manager: Add New Project.
Why we use it: Displays file size in the Sublime Text status bar. Where possible, the size is queried from the file system. If this information is not available -- e.g. for a buffer that was modified and not yet saved -- the file size is estimated from the buffer contents and chosen encoding.
Why we use it: Stylefmt is a tool that automatically formats CSS according to stylelint rules. If you want it to run via gulp automatically on save, see devpackages/gulpfile.js.
If you want it to run automatically via editor, add these to your Stylefmt user settings:
{
"formatOnSave": true,
"syntaxes": ["SCSS"],
"extensions": [".scss"]
}
Please note the bug in formatSassVariables.js.
Why we use it: Provides full-featured code intelligence and smart autocomplete for Sublime Text.
Why we use it: Lints the code you write which means, it reports about warnings and errors you should correct. Helps you write better code.
Setting up: Make sure you have the latest Settings.
Why we use it: Checks errors for SCSS syntax, using scss-lint. Makes sure we use same standard and write good code.
Setting up: Go through Installation instructions.
Why we use it: This linter plugin for SublimeLinter provides an interface to phpcs. It will be used with files that have the "PHP", "HTML" and "HTML5" syntax. Makes sure we use same standard and write good code.
Setting up: Install phpcs to your ~/Projects directory. Clone PHPCompatibility folder and WordPress-Coding-Standards to your ~/Projects directory as well as wpcs. For this to work with Dude's config, you should have three folders: ~/Projects/phpcs, ~/Projects/wpcs and ~/Projects/PHPCompatibility.
Why we use it: SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files. Easy to use by typing Cmd + Shift + P and svgo + enter.
Why we use it: A Sublime Text 3 package for highlighting both Sass and SCSS syntax. Legacy version of Syntax-highlighting-for-Sass. Works better with our custom theme, colors also complicated pseudos and other oddities.
Setting up: Type Cmd + Shift + P and choose Package Control: Add Repository. Paste this: https://github.com/ronilaukkarinen/Syntax-highlighting-for-Sass-legacy and press enter. Then install normally by choosing "Syntax-highlighting-for-Sass-legacy".
Why we use it: A Hyperminimal UI Theme for Sublime Text. Easy on the eyes.