Visual Studio Code Extensions

VSCode Extensions for SCSS/CSS

ext install bbugh.change-color-format - Change Color Format with repo at bbugh/vscode-change-color-format: VSCode extension that quickly transform selections to and from various color formats: #RRGGBB, hsl/a, rgb/a, color names, and more. to quickly transform any color format into another color format. Usage: Select just the color and run “Convert color …”.

Stylelint has a plugin for that: filipekiss/stylelint-color-format: Stylelint plugin to convert HEX colors to either RGB or HSL

VS Code extension: Sort CSS properties, CSS Rule Sorting

order things like CSS properties within declaration blocks

ext install mrmlnc.vscode-postcss-sorting - PostCSS Sorting samo koristi PostCSS sa plugin hudochenkov/postcss-sorting, ali to je prednost.

There is also a Stylelint plugin for sorting from the same author, called hudochenkov/stylelint-order.

There is a more popular css-declaration-sorter available, but the only VSCode extension CSS Sorter, is not updated. The repository for madskristensen/CssSorterVS provides more information and demonstrates how to install the full node.js module with the extension. Unfortunately, it is not currently functioning.

Sort CSS selection concentrically - Visual Studio Marketplace. očajno radi!

Concentric CSS order je ustvari super!

brandon-rhodes/Concentric-CSS: A standard order for CSS properties that starts at the outer edge of the box model and moves inward

same sstandard: CSS sorter - Visual Studio Marketplace

similar:

CSS Property Sorter - Visual Studio Marketplace

CSS Alphabetize dodaje komandu “CSS Sort Properties”

VS Code extension: CSS Compact, one-line formatter, format CSS in one line

Inače, u većini IDE to postoji kao normalna opcija: Compact CSS formatting in Visual Studio

Većina ekstenzija su vrlo rudimentarne i to me i nagnalo da i ja napišem jednu. Masovno koriste clean-css library, nemam pojma zašto baš taj? Pokušaću da ih sortiram po “kvalitetu”.

idreamsoft.css-format-st3

The idreamsoft/css-format-st3 repository provides a CSS formatting extension for Sublime Text 3, which can be installed with the command ext install idreamsoft.css-format-st3. Upon examination, I discovered that the extension contains various components in its backend, including js-beautify and eslint, but it performs well. It definitely uses js-beautify for formatting and supports both selections and entire files. The “Compact” format is my preferred option.

• travis71i.clean-css-vscode - Clean CSS for VSCode with repo Travis71i/clean-css-vscode: Clean CSS adapted as a Visual Studio Code extension.

• jsonchou.css-compact - css-compact with repo at jsonchou/cssCompact: let’s go back to original way to write our css

CSS Formatter by junstyle (ext install junstyle.css-formatter) sa repo junstyle/vscode-css-formatter: keep properties in one line ustvari koristi minifikaciju od clean-css/clean-css: Fast and efficient CSS optimizer for node.js and the Web što i nije loše samo po sebi, ali je problam što ne radi na SCSS i što ume

css-format-one-line with repo at lunelson/vscode-css-format-one-line

• bestvow.css-compressor: [CSS Compressor](https://marketplace.visualstudio.com/items?itemName=bestvow.css-compressor) and repo at [bestvow/css-compressor: a visual studio code extension for compress css file as compact or minify format](https://github.com/bestvow/css-compressor), based on clean-css`

• CSS Formatter by Martin Aeschlimann with repo aeschli/vscode-css-formatter: CSS Formatter for VSCode ustvari koristi js-beautify sa nekim parametrima.

• williamdang.vscode-simply-css-formatter - Simply CSS Formatter koristi clean-css/clean-css: Fast and efficient CSS optimizer for node.js and the Web koji je u “maintenance mode”

• ext install xxxxst.vscode-scss-format - scss-format sa repo na xxxxst/vscode-scss-format: vscode scss fromat as one line je samostalna i izgleda da korisnik aktivno ispravlja, što obećava. Pokrećeš sa Ctrl-J

Dakle sve su ozbiljna govna.

Napiši moj formatter za SCSS - nemoj! u jednoj liniji ali i po vertiakalam, i pametno. very opiniated i sortirano.

one line css

ima gomila sličnih ali ni jedna ne radi

css-property-initial-value

Code Linting

Stylelint

Stylelint

ext install stylelint.vscode-stylelint - Stylelint at repo stylelint/vscode-stylelint: The official Visual Studio Code extension for Stylelint.

Source: VSCode setup with ESLint + Stylelint, but w/o prettier | Alexanders`s blog

Treba imati ili instaliran u projektu ili najbolje globalno npm install -g stylelint. Ovo treba i na svakoj remote mašini kao root ili ćeš po projektu.

Ima podešavanja ali možda je bolje relying on a Stylelint configuration file in your project folder. Config is loaded from stylelint property of package.json, files .stylelintrc.{cjs,js,json,yaml,yml}, but the one I’ll use is stylelint.config.{cjs,js} exporting a JS object. Dakle, moj je stylelint.config.js

Formatting is called “autofixing” and the command is Fix all auto-fixable problems.

Inače, stylelint može normalno da se pokreće kao PostCSS plugin.

npm i -g stylelint

ako želiš pluginove neke opcionalne

npm i -g stylelint-order stylelint-color-format stylelint-declaration-block-no-ignored-properties

I tako, zaboravi! focus on writing and maintaining rules that help you avoid errors and enforce (non-stylistic) conventions, both of which are unique to Stylelint

Upravo ukidaju stylistic rules Migrating to 15.0.0 | Stylelint :)

EsLint

ESLint is “static analysis tool” to find problems in code and fix them. There is playgorund at ESLint Playground - ESLint - Pluggable JavaScript Linter.

microsoft/vscode-eslint: VSCode extension to integrate eslint into VSCode at repo microsoft/vscode-eslint: VSCode extension to integrate eslint into VSCode

ESLint can be used as a formatter and to enable this feature use the eslint.format.enable setting.

Code formatting

Prettier je “opiniated” code formatter that enforces a consistent style. Generalno mi je ok za većinu jezika, ali za neke me ekstra nervira i tu moram da ga zamenim. Playground je Prettier dok je repo prettier/prettier: Prettier is an opinionated code formatter..

Prettier nikad neće pordžavati CSS one-line format: [CSS] single line property formatting · Issue #5948 · prettier/prettier

Linter proveravajuv greške unapred, Stylelint je za SCSS, CSS i slično, ESLint je za JavaScript i slično. Oba lintera sada umeju i da formatiraju i to sa svim svojim detaljnim podešavanjima i oba imaju zvanične ekstenzija za VSCode. Ja ću se sad fokusirati na SCSS jer želim da namestim “compact” aka “one-line” formating.

Postoji dodatak za PHP za Prettier: prettier/plugin-php: Prettier PHP Plugin a tu je i Prettier PHP Playground a može i da se inkorporira u VSCode.

JS Beautifier je za Beautify JavaScript, JSON, React.js, HTML, CSS, SCSS, and SASS sa repo na beautify-web/js-beautify: Beautifier for javascript. Može da radi i u browseru.

PostCSS sa nekim pluginovima. na primer, evo ga hudochenkov/postcss-sorting

1. 1. Execute the “Extensions: Install Extensions” command from the Command Palette. 1. Type @id:stylelint.vscode-stylelint into the search form and install the topmost one.