atom / autocomplete-css Goto Github PK

I'm quite new to Atom, and one thing that's been bugging me for a while is the automatic addition of the trailing semi-colon when you've picked an autocomplete suggestion.

For instance list-style: -> auto-complete -> square puts the semi-colon at the end.

I've got 12 years' muscle memory of typing the semi-colon manually, so I'm frequently & accidentally now writing 2 in a row. It's also annoying because when there is no auto-complete suggestion, I have to manually type it anyway, so I'd much rather an all or nothing approach.

So, I'd love a setting to enable or disable this feature.

The code in question is:

text += ';' unless hasScope(scopes, 'source.sass')

Currently, autocomplete includes parenthesis (and closing semicolons) to values that require parenthesis (e.g. – translate()). In theory this sounds nice, but in practice it just requires a user to move their cursor backwards into the parenthesis.

Autocompleting the "translate" value is an example:

.some-selector {
  transform: translate();[CURSOR]
}

Given that placing the cursor within the parenthesis is not within the scope of autocomplete and should be handled by a snippet, I propose it's better to not autocomplete values like this with parenthesis and semicolons.

.some-selector {
  transform: translate[CURSOR]
}

There are plenty of values that fall into this, translate is just one example.

When I write css code inline, but the autocomplete-css does't work. It is not help me to complete the code.I think many people meet this question,

Best wishes!
Mascot

The autocomplete stopped working after i split the view in 2 using the "split down" option, and then resized the lower window (the one with the css), (i made it smaller, about 20% of the screen height).
It still works in the ordinary window (the upper one), but it wont trigger at all (even with ctrl-space) in the lower window.

NOTE:
I realize this might not be a bug since the autocomplete menu wouldn't relay fit in the small window. Although i would still like it to work, maybe just make the menu scale with the size of the window?

Another bug?
I just realized something, if i have the same css open in both windows, when i target the lower window and start typing, the menu shows up in the upper one.

Hello, I am newbie in atom. I can't see properties for display like inline-block, block and so on. Like in your gif.

Maybe this can help:
You can update the prebuilt list of property names and values by running the update.coffee file at the root of the repository and then checking in the changed properties.json file.

But I can't understand how to do that. Can you help me?

When typing out css attributes on a single line autocomplete ceases functioning.

The default behavior after autocompleting a CSS property is to insert a colon and a space. I know that many people like to format their CSS that way, but since I don't have each property on its own line in the code, I rely on the space after the semicolon to show me where they begin and end, and having a space after the colon messes up my ability to visually scan the file for what I'm looking for. Please add an option for whether you want the space after the colon on autocomplete or not. Thanks.

Not sure if this should be here or under the main plugin issue list.

But if I try to use TAB on margin it expands to max-resolution: res;

and this is my list of plugins installed

asteroids\
atom-handlebars\
autocomplete-css\
autocomplete-html\
autocomplete-plus\
autocomplete-snippets\
color-picker\
command-logger\
docblockr\
editor-stats\
editorconfig\
emmet\
file-icons\
fizzy\
graphite-ui\
highlight-selected\
ibm-dimensions-kit\
linter\
linter-bootlint\
linter-csslint\
linter-jscs\
linter-jshint\
linter-scss-lint\
merge-conflicts\
minimap\
minimap-color-highlight\
minimap-find-and-replace\
minimap-git-diff\
minimap-highlight-selected\
minimap-selection\
monokai\
react\
seti-syntax\
seti-ui\
sort-lines\
spacegray-dark-ui\
Sublime-Style-Column-Selection\
travis-ci-status\
unity-ui\
visual-bell\
Zen\

I am using CSSX to write css in my .jsx files. However, not having autocomplete-css recognize my css is slowing me down.

Can autocomplete-css be set to recognize CSS in a .jsx file?

https://developer.mozilla.org/en/docs/Web/CSS/initial

So I'm trying to hit 'tab' to add comments at the end of a line and it always shows me suggestions even before I've started typing the given style. I'm constantly hitting tab and it's add 'width' at random points.

Screenshot enclosed.

Autocompleting a property in CSS causes another autocompletion box with only properties to open up. Can't see values after autocompleting property.

Installed community packages:
emmet
less-than-slash
linter-php
minimap
pigments
wordpress-api

Use ::getPaths instead

Project.getPath (D:\Program Files\atom\app-0.189.0\resources\app\src\project.js:235:12)
Atom.showSaveDialogSync (D:\Program Files\atom\app-0.189.0\resources\app\src\atom.js:840:62)

我下载最新版 css 后面的属性不能提示

They're really all over the place right now. Not sure how this happened, or if there's a reason for it. Minor point, but it's a bit confusing.

FWIW the Brackets properties file the readme references is alphabetized.

From @dmitry on July 5, 2015 15:0

Currently if I write .plac it will find only .place class name, and not .place__header.

.place {
  &__header {

  }
}

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

Copied from original issue: atom/language-sass#71

When Atom 1.12.0 reaches stable the following spec should be able to be re-enabled:

Consider the following behaviour:

When I reach the end of the line in my CSS/LESS file, I want to be able to hit enter and go to the next line, not select "width" every time or keep typing on the same line. Why is the autocomplete automatically triggered here? This behaviour is not exhibited in other files like javascript. No autocomplete box shows up after ending a line with a semi colon:

I think this is not desirable, and the autocomplete should not be triggered when the last character is a semi colon in CSS. It has nothing to go on (no alphanumeric characters), so it's just suggesting a complete list of CSS selectors, which is rather pointless.

And I write property name and when I write the values, but it doesn't work

I would love to see !important; as an autocomplete addition. I hate having to type it out, and Atom's syntax highlighter already recognizes it.

When I write "dis", the possible commands will be offered, I choose "display". But next, there's no any sub-options offered, even if I start to type "block". This is a huge miss from Adobe Dreamweaver. Can we see it in autocomplete-css?

Use a config schema instead. See the configuration section
of https://atom.io/docs/latest/hacking-atom-package-word-count and
https://atom.io/docs/api/latest/Config for more details

Package.activateConfig (D:\GreenSoft\Atom\resources\app\src\package.js:247:11)
Package.activateNow (D:\GreenSoft\Atom\resources\app\src\package.js:218:14)

I code a lot of email designs, where inline CSS is a neccessary evil as some email clients, like Gmail, strip out the CSS in <head>.
The bug I'd like to raise attention to is small but still horribly annoying. For example, if I want to achieve this:
<td style="line-height: 18px
... I'd start typing li and get the line-height auto-complete option and press Enter, but always end up without the :, and have to type it manually, even though there is no situation where I would NOT want one (or is there? if so please tell me!).

When Atom 1.10.0 reaches stable the following specs should be able to be re-enabled:

Auto fills in data too quickly, a pop out interrupt the flow when after typing in css with a comma. Therefor when hitting return after typing in a comma, autofill inputs the 1st item from the auto fill list.

I would suggest maybe a way to disable auto fill on after a comma is typed to fix this issue or enable min char before the pop out.

Hello there!

Since I use atom, with or without additional packages, I have a really weird bug in css autocompletion.
While Enter works as expected, Tab uses always the first completion offered via the autocomplete menu and inserts : and ; immediately.

Enter selects the item from the list where my cursor is.

So is there any other option that overwrites that? I'd be curious where that problem comes from.
As I prefer to autocomplete with tab and not with enter, this is really disturbing my workflow.

Debugging Infos:
Atom Version: 1.6.0

Currently used packages:

atom-language-velocity
atom-typescript
auto-detect-indentation
auto-reveal-active-file
color-picker
emmet
keybinding-cheatsheet
language-log
language-qml
language-ts
material-syntax
minimap
minimap-cursorline
minimap-find-and-replace
minimap-git-diff
minimap-highlight-selected
minimap-pigments
minimap-selection
monokai-seti
pigments
project-jump
seti-icons
seti-syntax
seti-ui
set-syntax
sublime-block-comment
tree-view-git-branch

I see SCSS and Less are supported. Just wonder if it is possible to add Stylus support too? Even bracketed SCSS-ike syntax would do.

Like emmet:

"box-shadow:${1:inset }${2:hoff} ${3:voff} ${4:blur} ${5:color};"

https://github.com/emmetio/emmet/blob/master/lib/snippets.json#L156

Hi,

I'm brand new to Atom - just installed it today.

I tried to do autocomplete for background-color: transparent, but nothing shows up.

Any deadline for getting the last things to work?
I would really like to move from Sublime and to Atom - but this bugs me :)

Best regards,
Martin

I just installed the latest beta version 1.8.0, and now I cannot choose the suggested item when i press the 'Enter' key.

When using css autocomplete only show available values for the current property:

however when using sass, many more values are shown:

ideally this would show the exact same menu seen when editing css.

Are you trying to listen for the 'core:confirm' Atom command with jQuery::on?
jQuery::trigger can no longer be used to listen for Atom commands. Please
use atom.commands.add instead. See the docs at
https://atom.io/docs/api/latest/CommandRegistry

I think this issue is because all css codeblocks must stay inside the Smarty's tag {literal} and {/literal}.

How to reproduce:

1. Create a page.htm and add the following code:

<style type="text/css">
{literal}
div {
    margin-left: 5mm;
    margin-right: 5mm;
    border: 1px solid blue;
    >> IF YOU TRY TO ADD SOMETHING HERE, THE AUTOCOMPLETE DOESN'T WORK.
}
{/literal}
</style>

I want to use this autocomplete package for a different scope. Is there a way to accomplish this without forking the repository and adding my own selector to the provider?

autocomplete-css doesn't work for *.css file, but it works fine for *.scss file. The version is 0.13.1.

It would be great if this could be done, this issue makes me think about going back to Sublime. So please, go for it! Thank you so much!

I keep seeing this error when editing .sass files:

TypeError: Cannot read property 'concat' of null
  at Object.module.exports.getSuggestions (/Applications/Atom.app/Contents/Resources/app.asar/node_modules/autocomplete-css/lib/provider.js:35:65)
  at /Applications/Atom.app/Contents/Resources/app.asar/node_modules/autocomplete-plus/lib/autocomplete-manager.js:267:56
  at Array.forEach (native)
  at AutocompleteManager.module.exports.AutocompleteManager.getSuggestionsFromProviders (/Applications/Atom.app/Contents/Resources/app.asar/node_modules/autocomplete-plus/lib/autocomplete-manager.js:246:17)
  at AutocompleteManager.getSuggestionsFromProviders (/Applications/Atom.app/Contents/Resources/app.asar/node_modules/autocomplete-plus/lib/autocomplete-manager.js:3:61)
  at AutocompleteManager.module.exports.AutocompleteManager.findSuggestions (/Applications/Atom.app/Contents/Resources/app.asar/node_modules/autocomplete-plus/lib/autocomplete-manager.js:233:19)
  at /Applications/Atom.app/Contents/Resources/app.asar/node_modules/autocomplete-plus/lib/autocomplete-manager.js:3:61

This seems to happen when I make a small syntax error in the file, such as inserting a semicolon. However, I haven't been able to come up with reliable repro steps.

• Atom 1.0.11
• autocomplete-css 0.10.1
• OS X 10.10.2

.class {
  background-color: var(--custom-color);
  @apply(--custom-mixin);
}

The default provider is at least collecting the part after --. However css provider disabled default provider.

atom/autocomplete-plus#740

I found an issue about keywords that starts with '@': @import, @extend, @mixin, etc.

The '@' symbol is duplicated as a result of Scss file completion.
For example, when I type @import, Atom shows @@import.

How does it fixed?

From @geebru on July 8, 2015 18:53

See small screencast - http://cl.ly/3V1R3d0r1F3v

Mac OSX 10.10.4 - Atom 1.0.1 - No errors / crashes.

I've noticed when attempting to chain CSS selectors (in SCSS) the autocomplete pop-up will appear after I've typed the comma, meaning when I try to hit Return to go to the next line, I get width: width; instead of a new line.

I changed my settings from autocomplete on Tab to autocomplete on Enter after installing Emmet so it's well within my capabilities to circumvent the issue currently but curious as to why it pulls up this prompt when typing commas in CSS (SCSS)?

Copied from original issue: atom/atom#7799

It will be great if you can add support for .pcss and .postcss files.

I would wager that none is used more often than armenian, but none doesn't even appear above the fold.

IMHO the top-ranked results for list-style could be:

none
inherit
initial
unset (currently not included at all)
url()
... and then all the shapes, in alphabetical order.

More generally, is there a way to rank suggestions by popularity instead of alphabetically? Chrome's usage counter lists properties by popularity, but not values. Is that info publicly available somewhere?

If you're receptive to this I can make a PR.

Use activationCommands instead of activationEvents in your package.json
Commands should be grouped by selector as follows:

  "activationCommands": {
    "atom-workspace": ["foo:bar", "foo:baz"],
    "atom-text-editor": ["foo:quux"]
  }

Package.getActivationCommands (D:\GreenSoft\Atom\resources\app\src\package.js:766:9)
Package.hasActivationCommands (D:\GreenSoft\Atom\resources\app\src\package.js:691:20)

Hello,

It doesn't show autocompletion for initial and !important on CSS

#container {
    width: initial !important;
}

Thanks

Is this possible? Stylus, for example, makes colons optional, and I prefer to not use them.

Hi.
I am fairly new to Atom, and coming from Sublime text I really miss one thing:
can I have semicolon on css autocomplete?
So when I do autocomplete on say "color " it becomes "color: ;" ?
Now I have just a colon so it looks like this : "color: "
Thank you.

Not sure if others are experiencing this as well (although a slight variation is mentioned here #15).

Also I apologize if this is a "feature" and not an issue and if so, please close it.

Since the new autocomplete-plus changes, I've been having invalid property values showing first, tabbing, and getting an incorrect one. It has almost (almost, not entirely) defeated the point of using autocomplete css.

Ex.

div {
text-align: ce
postition: re
}

The first choice for text-align for the majority of people is center, not charset (invalid value). Same as position, most people are looking for relative, not review (again, an invalid value, which adds something like // REVIEW: )

I'd like to be able to see it only show valid values for the css property, but it appears to be just doing a lookup for all css props/values that contain those letters (not even in consecutive order). I've attempted to enable the strict matching in the autocomplete-plus package to match my prefix exactly, but it doesn't appear to be working (Maybe I'm doing it wrong?).

I'll attempt (albeit I know unsuccessfully) to find a fix, but if anyone has encountered this or has suggestions/quick fix, please let me know.

Thanks

For example, when I type

p {
    w

I get whitespace and widows before width. 99.9% of the time I'm after width, and I suspect this is true of most devs. I can imagine some won't like this so I guess it should be optional.

Also, I realise I can easily implement this myself by setting a different source for css properties, but I'm not sure if that's the best general solution?

I need some help with this. The core css autocomplete doesn't work and so doesn't this one! How do I resolve this issue?