Less auto-complete info?


#1

Hello everyone, I’ve recently started using Atom after using Sublime Text 2 for quite a while. One of the things I find distracting while writing code is the big auto-complete box, there’s too much info in it that I don’t need. I was wondering if there’s a way to remove the things I’ve circled in red in the image below?
Thanks. :slight_smile:


#2

Use the Developer Tools to get the class-names you want to hide and add them to your styles-heet.

Example:

atom-text-editor {
  i.icon.snippet,
  span.right-label {
    display: none;
  }
}

#3

I have the following, but it doesn’t work.

atom-text-editor {
i.icon.snippet,
span.left-label {
display: none;
}

i.icon.snippet,
a.suggestion-description-more-link {
display: none;
}

i.icon.snippet,
div.suggestion-description {
display: none;
}

i.icon.snippet,
i.icon.function {
display: none;
}

i.icon.snippet,
span.icon.letter {
display: none;
}

i.icon.snippet,
i.icon.variable {
display: none;
}

i.icon.snippet,
i.icon-code::before {
display: none;
}

i.icon.snippet,
i.icon.tag {
display: none;
}

i.icon.snippet,
span.icon-container {
display: none;
}

i.icon.snippet,
i.icon.selector {
display:none;
}

i.icon.snippet,
span.suggestion-description-content {
display: none;
}

i.icon.snippet,
div.suggestion-description {
display: none;
}

i.icon.snippet,
i.icon.property {
display: none;
}

i.icon.snippet,
span.icon-letter {
display: none;
}

i.icon.snippet,
span.icon-container {
display: none;
}
}


#4
  1. You should preformat your code. You can do this by wrapping it in triple backticks, or by highlighting it and clicking the </> icon in the editor.

  2. You should read up on CSS selectors. Specifically, the rule i.icon.snippet, i.icon.property covers both of those selectors individually. As a result, you have i.icon.snippet set to display: none a bunch of times. You can delete most of those and move them all into one rule. You’ve also got excessive specificity all over the place. You don’t need to hide every single element, only the parents.

  3. The pre-existing CSS forces us to use more precise selectors because it’s kind of messy as-is. The following code is longer than it would be if there weren’t already fairly specific rules in place. Note that it’s still a lot shorter and more legible.

What you want is something like this:

atom-text-editor.autocomplete-active autocomplete-suggestion-list.popover-list.select-list {
  .icon-container,
  .left-label,
  .right-label,
  .suggestion-description {
    display: none;
  }
}

#5

This is my go-to reference for CSS selectors:

It is single-handedly responsible for a significant amount of my meager CSS knowledge :laughing:


#6

I have a few references I consult for different parts of CSS (like making gradients or fancy borders), but for selectors I just look at the W3CSchools reference table. It’s concise and it didn’t used to leave things out, but now I realize that shadow DOMs are in play and it doesn’t discuss those.