ATOM.md

ATOM Editor

Instal linter-eslint package

https://alligator.io/vuejs/vue-eslint-plugin/

Change "Fix errors on save"
Add "text.html.vue" to "List of scopes"

source.js, source.jsx, source.js.jsx, source.babel, source.js-semantic, text.html.vue

Change .eslintrc.js to

extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/recommended', 
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],

Install "autoclose-html" package

1 Install ATOM

https://atom.io/

2 Install Nuclide from ATOM "nuclide-installer"

http://nuclide.io/

3 Install JavaScript/jQuery autocomplete: atom-ternjs

https://github.com/atom/autocomplete-plus/wiki/Autocomplete-Providers

Configure your project

Navigate to Packages -> Atom Ternjs -> Configure project

The config view appears and select jQuery and Browser

Hit "Save & Restart Server" to create/update the .tern-project file

4 Set "Braket Matcher" package's setting to stop autocomplete

Disable "Wrap-Guide" package

Find "AutoSave" package and enable it in Settings

Find "Tabs" package and in settings to enable "Use Preview Tabs"

5 Install minimap

http://www.hongkiat.com/blog/useful-atom-packages/

6 Install atom-beautify

7 Install seti-icos / file-icons

8 Install Xcode theme

9 Install "Highlight Selected"

10 Install "React" (http://orktes.github.io/atom-react/)

11 Install "Color Picker"

12 Find "React" package and click "Settings". Set "Show Indent Guide" for JavaScript(JSX).

Find the core settings and set "Show Indent Guide"

13 Install "Tabs". Set "Use Preview Tabs"

14 Disable or uninstall "nuclide-file-tree".

This tree view doesn't scroll vertically

Customize style

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */


/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: #22252b;
  color: #c9c9c9;
}

// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow .cursor {
  border-color: red;
}

atom-text-editor::shadow .comment {
  color: #a63f5a;
  font-style: normal;
  font-size: 14px;
}

atom-text-editor::shadow .keyword.operator{
  //color: #ee3890
  color: #ff9595
}

.tab .title{
   color: #e6cd63;
  //color: blue;
  font-size: small;
}
.tab-bar .tab.active[data-type$="Editor"]{
  background-color: #515d71
}
.tab-bar .tab.active[data-type$="Editor"] .title{
  background-color: #515d71
}
.close-icon{
  color: #e6cd63;
}
.name{
  font-size: small;
}

atom-text-editor::shadow .entity.name.function{
  //color: yellow;
}

atom-text-editor::shadow .bracket-matcher .region{
    //border-bottom: 1px dashed #2eb8f4;
    //position: absolute;
    //border: 1px solid yellow;
    //background-color: #fcc0f3;
    background-color: #808080;
}

atom-text-editor .indent-guide, atom-text-editor::shadow .indent-guide{
  //box-shadow:1px 0 rgba(0, 0, 0, 0.1)
  box-shadow:1px 0 #3b3a3a
}

.nuclide-tree-root .nuclide-tree-component-selected{
  //color: #808080;
}

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */


/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
  font-size: 16px;
}
.list-group li:not(.list-nested-item), .list-tree li:not(.list-nested-item), .list-group li.list-nested-item > .list-item, .list-tree li.list-nested-item > .list-item {
  // line-height: 26px;
  height: 26px;
}

.tab .title {
  font-size: 16px;
}

.icon-file-text::before, .icon::before{
  font-size: 24px;
  padding-right: 24px;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// style UI elements inside atom-text-editor
atom-text-editor .cursor {
  // border-color: red;
}
atom-text-editor::shadow .bracket-matcher .region{
    //border-bottom: 1px dashed #2eb8f4;
    //position: absolute;
    //border: 1px solid yellow;
    //background-color: #fcc0f3;
    background-color: #808080;
}
.preview-pane{
  font-size: 16px
}