Is it possible to have a nested property list and let do stylelint it's work? I tried to do this, but I got the following error:
events.js:85
throw er; // Unhandled 'error' event
^
Error: Expected pseudo-class or pseudo-element
I tried it with this code:
padding: {
left: 20px;
top: 30px;
}
And this is the configuration I use at the moment:
"rules": {
"block-no-empty": true,
"color-no-invalid-hex": true,
"declaration-colon-space-after": "always",
"declaration-colon-space-before": "never",
"function-comma-space-after": "always",
"function-url-quotes": "double",
"media-feature-colon-space-after": "always",
"media-feature-colon-space-before": "never",
"media-feature-name-no-vendor-prefix": true,
"max-empty-lines": 5,
"number-leading-zero": "never",
"number-no-trailing-zeros": true,
"property-no-vendor-prefix": true,
"rule-no-duplicate-properties": true,
"declaration-block-no-single-line": true,
"rule-trailing-semicolon": "always",
"selector-list-comma-space-before": "never",
"selector-list-comma-newline-after": "always",
"selector-no-id": true,
"string-quotes": "double",
"value-no-vendor-prefix": true
}
Or is there another SCSS linter without using Ruby gems?
It might be useful to have this information:
These are my vars:
var postcss = require('gulp-postcss');
var reporter = require('postcss-reporter');
var syntax_scss = require('postcss-scss');
var stylelint = require('stylelint');
And at the bottom of the file is this:
var processors = [
stylelint(stylelintConfig),
reporter({
clearMessages: true,
throwError: false
})
];
gulp.src('style.scss')
.pipe(postcss(
processors, {
syntax: syntax_scss
}));
I followed a tutorial like this one:
http://www.creativenightly.com/2016/02/How-to-lint-your-css-with-stylelint/
And changed some bits in my code to work with the rest of the website.
This issue is due to the code not being valid css but is valid for scss.
Related: https://github.com/stylelint/stylelint/issues/1386#issuecomment-223266044
Related
I'm trying to make an IDE that works in the browser using the Monaco editor. I wanted to use Prettier for a nice formatting. It only works for Javascript files or only html files. However, it does not work on files of the types I have specified below. How can I fix.
Expected :
Result :
Also i am getting this error :
monaco.languages.registerDocumentFormattingEditProvider("javascript", {
async provideDocumentFormattingEdits(model) {
alert(1);
var text1 = prettier.format(model.getValue(), {
wrapAttributes: "force",
parser: "babel",
// plugins: [babel],
htmlWhitespaceSensitivity: "ignore",
arrowParens: "always",
bracketSpacing: true,
endOfLine: "lf",
insertPragma: false,
singleAttributePerLine: false,
bracketSameLine: false,
printWidth: 400,
proseWrap: "preserve",
quoteProps: "as-needed",
requirePragma: false,
semi: true,
singleQuote: true,
tabWidth: 4,
//trailingComma: 'es5',
useTabs: false,
vueIndentScriptAndStyle: false,
});
return [
{
range: model.getFullModelRange(),
text: text1,
},
];
},
});
monaco_scr_editor = monaco.editor.create(document.getElementById("browserIDE"), {
value: ["<html>Please Wait Loading</html>"].join("\n"),
language: "javascript",
theme: "vs-dark",
wrappingColumn: 0,
autoIndent: true,
formatOnPaste: true,
formatOnType: true,
wrappingIndent: "indent",
wordWrap: "off",
automaticLayout: true,
overviewRulerLanes: 1,
overviewRulerBorder: true,
minimap: { enabled: false },
});
You need to provide right value for options.parser.
From docs
options.parser must be set according to the language you are formatting (see the list of available parsers). Alternatively, options.filepath can be specified for Prettier to infer the parser from the file extension.
so set it to parser: "html".
It seems like designed to use pre-defined formatter.
Please refer this issue : Disable default formatters.
I tested code as below(from a thread),
monaco.languages.html.htmlDefaults.setModeConfiguration({
...monaco.languages.html.htmlDefaults.modeConfiguration,
documentFormattingEdits: false,
documentRangeFormattingEdits: false,
});
This will work for you.
But you still get error relate with prettier.
Refer this issue : https://github.com/prettier/prettier/issues/6264
Before doing this, install this to make easy import parser list from node_module.
npm install #types/prettier
and then import it.
import * as prettier from 'prettier/standalone'
import * as parserHtml from 'prettier/parser-html'
...
prettier.format(model.getValue(), {
...
parser: "html",
plugins: [parserHtml],
...
I'm trying to sort props names alphabetically using the plugin eslint-plugin-react but I'm getting this error:
[Error ] .eslintrc.json: Configuration for rule "react/jsx-sort-props" is invalid: Value {"callbacksLast":true,"shorthandFirst":false,"shorthandLast":true,"multiline":"last","ignoreCase":true,"noSortAlphabetically":false} should NOT have additional properties.
This is my .eslintrc.json file:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"next/core-web-vitals"
],
"rules": {
"react/jsx-sort-props": [
"2",
{
"callbacksLast": true,
"shorthandFirst": false,
"shorthandLast": true,
"multiline": "last",
"ignoreCase": true,
"noSortAlphabetically": false
}
]
}
}
What I'm missing?
There are two issues:
The severity option, if you're using a number, should be a number, not a string that contains a number - 2, not "2". (Though, personally, I'd suggest using "error" instead - it makes it clearer from reading the config what the rule means for your project - "error" makes more intuitive sense than 2)
There is a bug in the linter rule's jsx-sort-props.js - although the docs reference a multiline property, said property does not exist anywhere in the lint rule implementation, and so an error is thrown when you pass in an object containing that property. Remove it.
"rules": {
"react/jsx-sort-props": [
2,
{
"callbacksLast": true,
"shorthandFirst": false,
"shorthandLast": true,
"ignoreCase": true,
"noSortAlphabetically": false
}
]
}
I've created a completely new angular application using ng new test-app, added Prettier to devDependencies and installed it and have disabled all extensions except Prettier in VSCode.
The problem is that when I set up VSCode to format on save, it always removes the trailing commas in typescript arrays and objects.
I've set "trailingComma":"all" in .prettierrc.json as well as having these settings in settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"prettier.trailingComma": "all",
"prettier.proseWrap": "always",
"prettier.useEditorConfig": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always"
}
My User settings for all vscode projects is
{
"git.autoStash": true,
"todo-tree.general.tags": [
"BUG",
"HACK",
"FIXME",
"TODO",
"XXX",
"[ ]",
"[x]"
],
"todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
"git.autofetch": true,
"files.autoSave": "afterDelay",
"git.enableSmartCommit": true,
"workbench.startupEditor": "newUntitledFile",
"cSpell.userWords": [
"Reorderable",
"configcat",
"datatable",
"devkit",
"initialise",
"initialising",
"primeng"
],
"editor.largeFileOptimizations": false,
"git.confirmSync": false,
"diffEditor.wordWrap": "on",
"explorer.confirmDelete": true,
"explorer.confirmDragAndDrop": true,
"workbench.editorAssociations": {
"*.sqlite": "default"
},
"diffEditor.ignoreTrimWhitespace": false
}
Turns out Prettier does add trailing comma's but only if the array is split over multiple lines.
E.g. the code below will have a trailing comma added by prettier
let x = [
"aaaaaaaaaaaaaaaa",
"bbbbbbbbbbbbbbbb",
"cccccccccccccccc",
"dddddddddddddddd",
"eeeeeeeeeeeeeeee",
"ffffffffffffffff"
];
I want to specify string lengths for HTML and JS in one config file .prettierrc.
module.exports = {
singleQuote: true,
printWidth: 80,
[HTML]: {
printWidth: 150,
},
};
But in log i got:
ReferenceError: HTML is not defined
You should be using the .prettierrc format instead, visual studio code will also provide intellisense when you use this format.
You are getting the error because:
The file needs to be in the JSON format,
Any overrides need to be specified under the overrides JSON key
In your case the file should look like this:
.prettierrc
{
"singleQuote": true,
"printWidth": 80,
"overrides": [
{
"files": ["**/*.html"],
"options": {
"printWidth": 150
}
}
]
}
I'm having trouble disabling dot-notation in eslint. Below is my eslint config (for the toy example):
module.exports = {
"env": {
"browser": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
4
],
"dot-notation": 0,
"no-console": 0,
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
};
And here is my javascript:
var x = { a: 3 };
console.log("x[a] = " + x["a"]);
According to this, 0 is the way to turn off this eslint option. What am I doing wrong?
Setting a rule value to 0 turns the rule off completely. This means that ESLint will not complain if you try to use an indexer rather than dot notation. It sounds like you're expecting the rule to either throw a warning or error which means that you need either a value of 1 (or warn) or 2 (or error) depending on how you want ESLint to behave.
The "Configuring Rules" section of "Configuring ESLint" should make it a little more clear:
https://eslint.org/docs/user-guide/configuring#configuring-rules