Switch ESLint Appearance on Atom - atom-editor

I have been using ESLint on Atom and the appearance of the linter changed and I have been unable to figure how to switch it back.
The linter now looks like this:
and I would like to restore the old look and feel:

Related

Changing the style of this react component in CSS to show the line numbers

I have implemented a react npm package called "react-json-pretty" in a web interface,
I would like for it to show the line numbers next to each line like so:
Not what I would like to have
What I would like to have
The npm package allows for css modifications (see bottom of the page)
I would like to mix the react-json-pretty with a CSS counter
like this
I have tried to modify it and can't figure out a way to do this, does anyone know how this is possible ?
Thanks

Can I edit my angular project's CSS files directly from chrome DevTools?

What is the most efficient way to style components in the browser dev tools with the default view encapsulation (emulated)?
My current workflow involves a lot of tedious copying and pasting from the dev tools like this:
Chrome dev tools has the ability to save styling changes made on the DOM to the source css file (Save Changes To Disk With Workspaces), but I don't know if this will work with the way Angular and Webpack use emulated component styles.
There's got to be a quicker workflow than what I am currently doing. Any tips?
You can directly edit your css project files from chrome devtools. Follow this steps:
In angular.json add "extractCss": true like so:
This way you'll see the css files in inspection instead of inner style tags in header
(you can see an example image in step 3 below).
Open chrome devtools, Sources tab, Filesystem left tab and add your project folder:
This is the magic trick, this will let you edit your local files from devtools!
now when you inspect your html for css, you can click the css file and you'll be redirected to your local file:
Edit your changes to the file.
Save the file.
Magic! Your local file was modified!
I LOVE Chrome!
Cheers
...I don't know if this will work with the way Angular and Webpack use emulated component styles.
TL;DR: You can't do this quite in the way you'd like to.
Angular scopes styles to components, and thus the .some-class-name[ngcontent-c5] notation in the Chrome inspector. As such, dev tools has no way of knowing exactly where to trace the change you made back to, other than the file it originated from using the source map.
As you mention in your question, you can load the project working directory into dev tools (article you posted) and edit the file itself. On save, the angular watcher will register the change and reload. This will work with pure css/js, as well as pre-compiler scss, ts, etc.
So to answer the question: yes, webpack will still recompile when you do that, but not quite in the way you're looking for.

bootstrap switch not working

I am using bootstrap switch and I installed it with Nuget package manager. This is what my solution explorer looks like after the installation:
Then I add two new bundles for them in my BundleConfig.cs:
I used the bundle in my layout view like this:
In the actual view, I have a checkbox like this:
I also initialize the bootstrap switch in the document ready function:
but when I run the page, it still looks like I didn't include the css file correctly:

Dracula theme (colors) for zsh not propagating

The Dracula theme for Zsh makes it seem by following the instructions there you'll not only get the prompt but the colors as well. Am i missing something?
This is what i got.
This is what it should look like.
Any help will be apprecited!
Not sure if this is the proper way—as I would think the dracula.zsh-theme file located in Users/your_root_folder/.oh-my-zsh/themes/dracula.zsh-theme would've included colors for the theme...
That being said I went to the terminal version of the dracula theme and just downloaded it and installed (e.g. Preferences/profiles/settings(gear-icon)/import it, then set it as the default. And wa-la (or blah-blah) it worked!

How to hide a file in Atom

I have a really huge webpack compiled javascript file in my project, and I'd like for it to be hidden in Atom since I keep clicking on it by accident, making Atom freeze.
How do I hide specific files in Github Atom Editor?
A quick way to hide a file would be to add it to the ignore-list in settings (open preferences, go to settings, under Core Settings you'll find Ignored Names).
Then to hide those from the tree view go to Packages, search for tree-view, open it's settings and make sure that Hide Ignored Names is checked.
If you're using a git-repository, for example, and don't need the file to be checked into the repository, it'd be cleaner to just add the file to .gitignore. Atom respects git-ignores and also hides them from the tree-view (as long as Hide VCS Ignored Names in the tree-view-settings is enabled).

Resources