Nâu Dotfiles

A set of recommended OS and tooling configurations for Nau team.

📁 OSX

These dotfiles are specific to Mac OS X only.

The Setup New Machine Script:

Use this script to install command line tools and set up defaults for a new OSX installation. Read the script for what it will do.

To run, execute:

./setup-new-machine.sh

(Add execute permission if the file hasn't: chmod +x initialize.sh).

Terminal / Command Line Helpers:

These files will add useful aliases and functions to your terminal session.

What are they:

• .aliases
• .bashrc
• .bash_profile
• .functions

How to install:

Running sync will copy those dotfiles into ~/.

./sync.sh

To update later on, just run the sync again.

Extras:

There are additional setup you might be interested in:

• Git friendly terminal prompt: Mathias Bynens' .bash_prompt
• Auto complete git commands: git-completion.bash

---

📁 Ubuntu

Ubuntu is not our official working OS yet. These dotfiles and bash profile configs are for personal uses. Usage is similar to ones in OSX.

---

📁 SublimeText

Our conventional IDE for Front End development is SubLime Text 3. Inside this folders are predefined snippets and settings for it.

How To Install

OSX / Windows / Linux

1. Install Sublime Package Control.
2. In Sublime Text, open menu Preferences > Browser Packages... -> The ST3's Packages folder will be opened.
3. Copy JavaScript & User folders in sublimetext/Packages from this repo over to this Packages folder.
4. Let SublimeText Package Control automatically install the plugins listed its setting file.

Experimental OSX

1. Execute shell script sublimetext/sync.sh in terminal to copy the files to the application Packages.

📁 JavaScript

The files in this folder can be classified into these categories:

Completions Files:

Sublime Text completions files (.sublime-completions) are dictionaries that keep a set of auto completion texts.

• JavaScript.sublime-completions: Auto completions for vanilla JavaScript language

  Note: We are considering the ST package JavaScript Completions to replace this completion file.

• jQuery.sublime-completions: Auto completions for jQuery API

Snippets:

Snippets are like completion files but they deal with single entry and have higher priority when displayed in the completion list.

Some remarkable snippets:

• console.log(): Triggered by typing log; after it completes the text console.log(), you have the chance to switch to console.info() or console.warn() or console.error() by typing the first letter of the method, respectively i, w, e
• IIFE block: Triggered by iife; complete the "immediately invoked function expression" block.

Please check out other snippets in the folder to learn what's available.

📁 User

Some other general config for ST3:

Default Sublime Text Plugin List:

In Package Control.sublime-settings, there is our recommended list of ST3 plugins for Front End development, with details below.

Install Package Control plugin (instructions at its website) before copying Package Control.sublime-settings. The rest will be installed automatically after you restart Sublime Text.

The recommended plugins are:

• Alignment: Help align code for better readability (especially in long properties list). Shortcut has been switch to ctrl+shift+a due to conflicts with SublimeLinter
• All Autocomplete: List and suggest completion for all the words appeared in opened files
• AutoFileName: Auto complete file names found in the project. This plugin is a complement to the FuzzyFilePath plugin.
• Babel: Language definitions for ES6+ JavaScript with React JSX syntax extensions.
• Color Highlighter: is a plugin for the Sublime text 2 and 3, which underlays selected hexadecimal colorcodes (like "#FFFFFF", "rgb(255,255,255)", "white", etc.) with their real color. Also, plugin adds color picker to easily modify colors.
• ColorPicker: Select and insert color from OS default color picker tool. Windows/Linux: ctrl+shift+c OS X: cmd+shift+c.
• DocBlockr: Simplifies writing DocBlock comments in Javascript, PHP, CoffeeScript, Actionscript...
• EditorConfig: Helps developers maintain consistent coding styles between different editors. See .editorconfig snippet.
• Emmet: Previously known as Zen Coding. Greatly enhance HTML & CSS workflow.
• ESLint-Formatter: format JS/ES file according to current ESLint config.
• FuzzyFilePath: Autocomplete relative or absolute file paths in Sublime Text project folder. Similar to AutoFileName but with fuzzy search capability.
• GitGutter: A plugin to see git diff in gutter
• Handlebars: package for Handlebars.js templates
• Hex to HSL Color Converter: plugin to convert CSS Hex colors to HSL
• HTML-CSS-JS Prettify: HTML, CSS, JavaScript and JSON code formatter for Sublime Text 2 and 3 via node.js
• Insert Nums: A Sublime Text 2 and 3 plugin, that inserts (consecutive) numbers across multiple selections or modifies the selections' contents with expressions. Huge configurability.
• InsertDate: Insert current date time with chosen format. Useful for editing Markdown's front matter and static blog site.
• JSCS-Formatter: Sublime Text 3 Plugin to autoformat your javascript code according to the JSCS configuration files you already have.
• Markdown Preview: Preview and build your markdown files quickly in your web browser from sublime text 2/3.
• MarkdownEditing: Powerful Markdown package for Sublime Text with better syntax understanding and good color schemes.
• Open Finder: (OSX only) Provides a command for opening Finder in the current directory.
• Package Control: The de facto package manager for Sublime Text. You already used it to install these plugins.
• Pretty JSON: plugin for [ST3] to pretty [and minify] json
• PxToEm: plugin to convert px to em with comments. Shortcut was changed to ctrl+shift+e to avoid linter conflicts.
• ReactJS: Sublime Text helpers for React/JSX.
• SassBeautify: Format SASS / SCSS files. Needs ruby sass preinstalled.
• SCSS: The TextMate SCSS Syntax Official Bundle.
• Select Quoted: A Sublime Text 2/3 plugin at add a "Expand Selection to Quoted" command.
• SideBarEnhancements: Enhance sidebar with many more useful commands.
• SublimeLinter: Interactive (real time feedback) code linting framework for Sublime Text 3. This is just the base framework, additional packages for related languages need to be installed.
• SublimeLinter-contrib-eslint: SublimeLinter wrapper for ESLint, requires global NodeJS package eslint.
• SublimeLinter-contrib-stylelint: SublimeLinter wrapper for stylelint, requires global NodeJS package stylelint.
• SublimeLinter-jshint: (deprecated) SublimeLinter plugin for JavaScript, using NodeJS package jshint.
• SublimeLinter-json: SublimeLinter plugin for JSON.
• Terminal: Launch terminal app with working folder from the current file or the root project.
• tern_for_sublime: A sophisticated JavaScript autocomplete engine which enhance JS/ES6 coding experience on ST. With latest ST3 build, tern will display a helpful documentation popup at method opening.

Note: key bindings for the plugins to be added

Additional Snippets:

• ESLint config: Triggered by eslintrc in new text file; it will complete the file with Nau's conventional coding rules for JavaScript. Save it as .eslintrc to the root of the project.
• stylelint config: Triggered by stylelintrc in new text file; it will complete the file with Nau's conventional coding rules for CSS and SCSS. Save it as .stylelintrc to the root of the project.
• .gitignore: Triggered by 'gitignore' in new text file. This is our generic files ignoring rules for GIT. Further modify it with project specific rules. Save it as .gitignore at project root and checked into GIT repo.
• Default EditorConfig: Triggered by editorconfig in new text file. Save it as .editorconfig at project root and should be checked into version control system.

EditorConfig helps developers define and seamlessly maintain consistent coding styles between different editors and IDEs. Most of the time, the concerned preferences are new line format, indentation rules for each kind of source files.

Key Bindings Modifiers

These key binding modifiers for OSX (Default (OSX).sublime-keymap) are to resolve conflicts among plugins and add shortcuts to useful but hidden commands:

[
    // Reveal current opening file in sidebar:
    {"keys": ["ctrl+super+r"], "command": "reveal_in_side_bar"},
    // Key bindings for copying full path of current file to clipboard
    {"keys": ["super+k", "super+p"], "command": "copy_path" },
    // New key binding for Alignment plugin
    {"keys": ["shift+ctrl+a"], "command": "alignment"},
    // New key binding for PxToEm plugin
    {"keys": ["shift+ctrl+e"], "command": "px_to_em"},
]

Other Preferences

Details of what's been set up for ST3 and plugins to enhance the workflow:

ColorHighlighter.sublime-settings

• Disable its key bindings for now due to conflict with expand selection to tag (super+shift+a).
• Add some additional extensions where color highlighting is expected.

Emmet.sublime-settings

• Trivially fix Emmet's tags comment filter to insert closing comments on the same line with closing tags instead of on a new line to save space. For e.g:

<h2 class="title">
    A Title
</h2><!-- /.title -->

Preferences.sublime-settings

Here's an extract of the system preference with explanation comments:

{
    // nice monospace font from Adobe, the light variant 
    // very pleasing on dark theme
    "font_face": "Source Code Pro Light",
    "font_size": 13,
    //this must be set in user settings to be enabled in MAC OSX
    "scroll_past_end": true,
    //avoid confusion with tabstops
    "tab_completion": false,
    // Flat dark theme with file-type-aware icon on the side bar; 
    // need to install via Package Control
    "theme": "predawn-DEV.sublime-theme",
    // better dark monokai editor scheme, preinstalled in bundled plugin list
    "color_scheme": "Packages/Monokai Extended/Monokai Extended.tmTheme",
    // The delay, in ms, before the auto complete window is shown after typing
    // Note: Delaying this to have the completion files more likely
    // to be included in the auto complete list
    "auto_complete_delay": 200,
    // For best practices, will be overriden by EditorConfig
    "trim_trailing_white_space_on_save": true,
    // Easier to differentiate folders from files
    "bold_folder_labels": true,
    // Esier to spot edited tabs
    "highlight_modified_tabs": true
}

Some of the entries were commented out in the real file to keep the preferences more agnostic. It's up to you to turn them on or use different settings.

Downloads:

• Adobe's Source Code Pro font: A legible and coder-friendly monospace font.
• Monokai Extended: This is a much enhanced version of ST default Monokai scheme.
• Predawn Theme: One of the best flat design dark theme for Sublime Text.

FuzzyFilePath.sublime-settings

• Added jsx, tmpl, hbs, json extensions to search for after require and define code block.
• (More tweaking to come as this is our very newly adopted plugin)

---

Thanks to

• Paul Irish and his dotfiles repository from which the OSX section is based on.
• Thanh Tran and his dotfiles repository from which this repo is forked and standardized further.

---

© 2015-2016 Nâu Studio