is there a rule in stylelint to make it so CSS appears before any subclass definitions?
i would like something like this to be invalid:
.some-class {
.some-sub-class {
background: red;
}
border: 1px;
}
I would like this to be correct.
.some-class {
border: 1px;
.some-sub-class {
background: red;
}
}
my stylelint setup is very basic and the file .stylelintrc only contains the following:
{
"processors": [
"stylelint-processor-styled-components"
],
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components"
]
}
does anyone know if there is a rule for what I am trying to do on stylelint?
You can use the order rule in the stylelint-order plugin pack to ensure declarations come before nested rules.
You'll need to install the plugin pack first:
npm i --save-dev stylelint-order
Then update your configuration object:
{
"processors": [
"stylelint-processor-styled-components"
],
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components"
],
"plugins": ["stylelint-order"],
"rules": {
"order/order": [
"declarations",
"rules"
]
}
}
Related
i have this old babel config file that have
....
"presets": [
[
"#babel/env",
{
"targets": {
"browsers": "> 1%, last 2 versions, not dead"
}
}
],
....
could it be updated like this with custom browserlist config?
....
"presets": [
[
"#babel/env",
{
"targets": {
"browsers": "#custom-package/browserslist"
}
}
],
....
I found out that this just works:
{
"targets": {
"browsers": "extends #custom-package/browserslist"
}
}
I want to select [ ] for syntax highlighting within a markdown file in VS Code.
I can target [ ] using the following regex: (?<=\s)\]|\[(?=\s).
However [ ] doesn't get matched when it is part of a heading.
As a minimal example, in the package.json I have the following:
"contributes": {
"grammars": [
{
"scopeName": "markdown.todo",
"path": "./syntaxes/todo.markdown.json",
"injectTo": ["text.html.markdown"]
}
]
}
Then, in the todo.markdown.json I have:
{
"scopeName": "markdown.todo",
"injectionSelector": "L:text.html.markdown",
"patterns": [
{ "include": "#item-todo" }
],
"repository": {
"item-todo": {
"name": "item.todo",
"match": "(?<=\\s)\\]|\\[(?=\\s)"
}
}
}
Finally, in the VS Code settings.json I apply a color using:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "item.todo",
"settings": {
"foreground": "#FF0000"
}
}
]
}
I can see below that [ ] gets selected, but not when it is within a heading.
When I inspect the tokens and scopes I see several textmate scopes.
I am not sure if this is related, but it seems that VS Code is highlighting the markdown headings based on the markup.heading scope. However, markup.heading is not present in the textmate scopes array.
I tried changing to "injectionSelector": "L:heading.1.markdown" and/ or "injectTo": ["heading.1.markdown"], but no matter what selectors I specify I cannot seem to be able to match [ ] within a heading.
Did you know if it's possible to write a vscode plugin to match only a given file?
My plugin already works but add snippets for all .json files. I wish to be able to add these snippets only if the current file is composer.json.
My current package.json (partial) is:
{
"contributes": {
"snippets": [
{
"language": "json",
"path": "./snippets/snippets.code-snippets"
}
]
}
}
The idea is to be able to having something like:
{
"contributes": {
"snippets": [
{
"filename": "composer.json", <-- JUST FOR ILLUSTRATION PURPOSE
"path": "./snippets/snippets.code-snippets"
}
]
}
}
Thanks.
I have a project with both JS and TS files (and JSX/TSX). I have a separate .eslintrc.json file for JS vs. TS. I'd like to be able to tell VSCode which eslint config file to use depending on the file extension.
Tried putting the settings in settings.json under the [typescript] field but that didn't work.
I think it should be possible to use 1 file and overrides option:
.eslintrc.js
module.exports = {
"root": true,
"plugins": ["#typescript-eslint"],
"rules": {
// JavaScript rules
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"plugins": [
"#typescript-eslint"
],
"rules": {
// TypeScript rules
}
}
]
}
And changing workspace settings:
"eslint.validate": [
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
]
How can I use the Airbnb JavaScript styling guide without using any additional tools? I already installed Tern (Tern IDE) for my Eclipse oxygen. I downloaded the latest release of the eslint-config-airbnb-base-v12.0.1 and selected under
Project -> Properties -> Tern ->Validation -> ESLint the .eslintrc file from the release. My Tern configuration is stored in a .tern-project file:
{
"ecmaVersion": 6,
"plugins": {
"guess-types": {
},
"outline": {
},
"eslint": {
"configFile": "C:\\dev\\workspace\\pyqt_web\\eslint-config-airbnb-base\\.eslintrc"
},
"browser-extension": {
},
"bootstrap": {
}
},
"libs": [
"browser",
"jquery"
]
}
The .eslintrc looks like:
{
"extends": "./index.js",
"rules": {
// disable requiring trailing commas because it might be nice to revert to
// being JSON at some point, and I don't want to make big changes now.
"comma-dangle": 0
},
}
and index.js:
module.exports = {
extends: [
'./rules/best-practices',
'./rules/errors',
'./rules/node',
'./rules/style',
'./rules/variables',
'./rules/es6',
'./rules/imports',
].map(require.resolve),
parserOptions: {
ecmaVersion: 2017,
sourceType: 'module',
ecmaFeatures: {
experimentalObjectRestSpread: true,
},
},
rules: {
strict: 'error',
},
};
From here i dont know how to go further. I would expect, that i get new warning which match these of airbnb style guide. Would this work for js code in html files?