I am using React and I really like the fact to I can write inline style directly in my javascript file. However, autocomplete css doesn't seems to work in Atom editor.It work fine with ".css" file, not in ".js" file. Is there an Atom package that would enable this feature? thank you
The scope in which snippets are working is defined in the snippet file itself. There is currently no way to make snippets work in a “foreign” scope (see this forum post for reference.)
Your best option is probably adding the language-css snippets to your Atom snippets (Atom > Snippets) and edit their scope accordingly (e.g. source.css, source.js). Alternatively, you could do the same creating a new package.
Related
When using Angular with VSCode I have seen in tutorials how people have been able to write the "styles" part of "#Component" in Strings using backticks (`) to allow multiline Strings to be directly written as CSS code inside an "app.component.ts" file. The tutorials show that as when written, all expressions typed in allows faster autocompletion with suggestions for values presented after an element has been added.
Like for example if "color:" is used suggested avaliable colors whose values can be used appear.
For me however no such suggestions ever appear when writting within multiline Strings inside a TypeScript file for CSS, although they do appear when using a regular CSS file, as well as when being written within a "style" element inside a HTML file. Still even though no autocomplete suggestions appear withing my TypeScript file, the CSS text code changes color depending on the used elements and values exactly as they do in CSS, so the TypeScript file does indeed recognize the CSS code as CSS, and the results when the server is run looks exactly as they should.
But how do I make it so that I still can get autocomplete suggestions when writting CSS code inside TypeScript to make things easier though?
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: [
`
h3 {
color: /*<--Expects automatic suggestions for auto completion, but I never get any.*/
}
`,
],
})
export class AppComponent {
title = 'my-dream-app';
}
This is related to this github issue: Extension providing language support in ES6 template strings #5961, which was resolved by this comment by one of the maintainers, Matt Bierner:
VS Code Extensions can now bundle ts server plugins. This allows extension authors to write a vscode extension that adds syntax highlighting + intellisense for template strings.
Two extensions are already making use of this:
vscode-styled-components — Syntax highlighting, IntelliSense, and error reporting for styled-component CSS strings.
lit-html — Syntax highlighting, IntelliSense, and formatting for lit-html template strings
If you are interested in writing an extension for a template string embedded language, take a look at how the implementation of these extensions. And let me know if you run into any problems or have any questions about the new contribution point (please open a new issue or post a question to stack overflow)
Note: The link to the Visual Studio Marketplace page for vscode-styled-components in the above quote is now dead. I think it has moved to here (but don't quote me on that. I'm not 100% sure what the history is here.)
I'm not aware of CSS currently having such a ts server plugin, so what you can do in the meantime before one is created is:
You can use the Template Literal Editor extension.
Quoting from its readme:
Open ES6 template literals and other configurable multi-line strings or heredocs in any language in a synced editor, with language support (HTML, CSS, SQL, shell, markdown etc).
Instructions:
Install extension to VS Code.
Open a JavaScript or TypeScript file, or a file in some other language if customized via "templateLiteralEditor.regexes" configuration. Many languages have a starter configuration included.
Place cursor inside any template literal string and press Ctrl+Enter.
Select language (defaults to html). Remembers the last selection as default.
Outermost template literal range opens in the selected language in a side-by-side view, synced with the original. Multiple cursors and undo work as usual, and saving the template results in saving of the original document.
Enjoy syntax highlighting, completions, formatting, commenting, snippets, your preferred editing extensions, etc!
When you edit the original document the template editor is kept in sync. If template boundaries are modified or a sync error happens, then the template literal editor is closed for safety.
Ctrl+Enter in the literal editor closes it and keeps the cursor position. Also ordinary close or "Revert And Close Editor" action should work without unnecessary save dialogs. There's also a Ctrl+Shift+Backspace shortcut to close all literal editors quickly, from any editor.
Other related tools:
This won't add suggestions, but for syntax highlighting in tagged template literal strings, there is the comment-tagged-templates extension by Matt Bierner. If you're already using styled-components, you can use vscode-styled-components
I'm using CSS modules with ReactJs (jsx). Is there a way to create a custom snippet within Emmet or Atom to use CSS modules instead of regular classes?
Example, currently Emmet works as follows:
.title expands to <div className="title"></div>
I want to be able to create a snippet similar to:
.styles-title expands to <div className={styles.title}></div>
This actually turned out to be rather tricky. Emmet and the Atom extension both allow for customization, but a security policy in Atom does not allow loading custom filters from outside the extension.
With some nudging in the right direction (see the GitHub issue linked above) I was able to write my own Atom extension that does this.
I'm building a simple, static style guide. It includes only static front-end assets – CSS, JS, fonts, and images which will be included in client apps via bower. My development stack, however, is a bit more sophisticated. I'm using gulp to wire up jade, sass, coffeescript etc. Everything is working great.
In the guide, I would like to have a preview of the source code so that you can conveniently copy the markup for a widget and paste it directly into your project. You can see this, for example, in the docs for Foundation. I would like to do something similar in my styleguide.
Now my question...
Of course, I could just duplicate the markup (once to render the content and a second time in pre tags to render the code snippet). But that's obviously bad because then I run the risk of failing to keep them in sync, thus defeating the entire purpose of displaying a code snippet.
Ideally, I want to type the markup once and have it render both the content and the code snippet. In a previous project, I was able to achieve this by writing a custom HAML filter. How can I do this with Jade?
Here are a couple solutions:
render-code - for file based code snippets in the same repository
jekyll-github-sample - for code snippets from any GitHub repo
Is it possible to define some template content cells which all new ipython notebooks include when being created?
I'd like my notebooks to include some standard CSS using this method and possibly also have a markdown cell with links I'm frequently using .
Thanks to #Jakob for the help.
To get permanent customised CSS within the notebooks, I needed to create <myprofile>/static/custom/custom.css in my .ipython user folder folder.
This worked quite ok. I used the firefox's webdev tools to find the css items and classes in the ipython notebook and managed to get a monokai-ish style:
I also learned from here that you can inject javascript which might make it possible to add default content to new notebooks. I haven't tried this one yet though.
Edit: if interested, the css file lives here. The monokai colors are based on .cm-s-ipython, which I think is similar what sublime text is using.
I recently setup django-grappelli on my first django app. While I like the way it looks I want to customize the colors, and other CSS.
From my research, it looks like I will have to use Compass but I've never used Compass before and want to double check that this is the best method before I embark on that path!
Is Django-grapelli even the right choice for some one that wants to customize the color theme?
Things I tried
Modify the CSS in the Grappelli stylesheets but they are formatted in a way that makes it tedious.
Extend the style sheet but I am not sure where to do this for the admin.
Create a custom.css but could not figure out where to put the path
Thanks for your advice!
It seems to me like Compass is just a tool to write CSS. I've never used it, but at the moment I don't see how it could make modding the admin interface any easier than doing it manually!
Whenever I make changes to the admin (I've made changes to Grappelli, like you're trying to do), I always use what you've listed as number 2. I've never had any troubles! I can try to help you out, if you'd like to try again.
What I do first is go to my Python install directory and copy the Grappelli source from Lib/site-packages. I put this code in my project directory as a project-level app. So, if you're using Django 1.4, you'll have a folder that has your project folder as well as manage.py in it. Put the code there.
Then, using your favorite web developer tools (I prefer Chrome's), figure out which stylesheet you need to modify and which css file it's in. I do this by right-clicking the element and selecting Inspect Element. This brings up the dev tools, and at the right it tells you the css file its referenced from as well as which line its on. If you open up that css file in your favorite text editor and make changes to it, it should work!
Let me know if you're having any trouble with this. I can try to help you out further.
(and, P.S., I wasn't trying to be pedantic with a basic overview of the use of Chrome's developer tools. I was just trying to be helpful by not assuming anything. I hope you don't take it as an insult.)