so using lessc(2.7.2) compiler and the the following
less.render(data, {
filename: entryFile,
plugins: [autoprefixPlugin],
compress: true,
sourceMap: {
sourceMapURL: '/static/extensions/css/index.css.map',
sourceMapBasepath: 'project/web/webroot/',
sourceMapRootpath: '/',
outputSourceFiles: true,
sourceMapFullFilename: '/static/extensions/css/index.css'
}
})
It generates a CSS/map string which are then written to files. now I've worked out most of the setting, but I'm still getting one issue.
In the .map file, the property "file" is set to "to.css".
I understand why, the compiler does not know the name of the file as it's not written yet, but I can't find anything in the docs about this either.
Am I missing an option?
Related
i have been trying to find documentation on this but i havent been able to. I use stylint in a project and we have the css order option activated. I haven't been able to set up VS code to show the errors and i haven't found a page with the information to actually know the order,so i always need to check on compile time if i have any mistakes in the CSS order properties, and it shows a huge error on screen.
this are the stylelint rules we have
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-concentric-order'],
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['mixin', 'if', 'else', 'include', 'extend']
}
],
'max-nesting-depth': 4,
indentation: 4,
// add your custom config here
// https://stylelint.io/user-guide/configuration
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep']
}
]
}
}
I dont see anything weird about it. It there a page where i can find the correct order? it is so annoying because when i get a stylelint order error, i usually have to find it in a few tries.
You are extending the stylelint-config-concentric-order community config. This config includes and configures the stylelint-order community plugin. You can find the order of the properties in the repo on GitHub.
You can see Stylelint errors in VS Code using the official Stylelint extension.
And you can have the extension automatically fix problems on save, which will include the order of your properties, using the editor.codeActionsOnSave configuration property:
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
"stylelint.validate": ["css", "postcss","scss"],
"css.validate": false,
"scss.validate": false
}
Alternatively, you can run npx stylelint "**/*.scss" --fix" on the command line to automatically fix problems.
I just ran NPM update on a project that was working fine. Now, I am getting a Prettier "Friendly Error". I'm wondering if ESLint and Prettier are not playing well together in my config.
error Replace `⏎··················Coming·Soon!⏎················` with `Coming·Soon!`
I'm not really sure what is going on here, but it looks like it's a formatting issue telling me to add backticks. The errors are on HTML markup that does not even have qoutes on it. It's literally <span>Coming Soon</span>.
.eslintrc.js:
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'#nuxtjs',
'prettier',
'prettier/vue',
'plugin:prettier/recommended',
'plugin:nuxt/recommended',
],
plugins: ['prettier'],
rules: {},
}
.prettierrc:
{
"semi": false,
"singleQuote": true,
"htmlWhitespaceSensitivity": "ignore"
}
The error isn't indicating the backticks. It's telling you the whitespace around Coming Soon! should be removed.
The config for htmlWhitespaceSensitivity can be confusing:
ignore - HTML whitespace is insignificant, so remove it
strict - HTML whitespace is significant, so ignore it
Thus you actually want to use strict. Configure ESLint as shown below (and restart IDE if using VS Code):
// .eslintrc.js
module.exports = {
rules: {
'prettier/prettier': {
htmlWhitespaceSensitivity: 'strict',
},
},
}
Note that htmlWhitespaceSensitivity config doesn't seem to have an effect in .prettierrc.
I can't figure out how to set the configuration in for the space between function parentheses. I've set it everywhere to true, but when I save a .vue file, the space is removed - after it is removed it is highlighted as error (Missing space between function parentheses). It happens in script section. In .js files spaces are added, but also highlighted as error, this time... Unexpected space between function parentheses?! There was some configuration of settings (which I'm not able to recreate now) when on save the space was added for a moment and then removed again in .vue files.
my settings.json
"vetur.format.defaultFormatter.js": "prettier", // tried both prettier and typescript
// "vetur.format.defaultFormatter.js": "vscode-typescript", // tried both prettier and typescript
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"spaceBeforeFunctionParen": true,
"eslintIntegration": true,
},
"vscode-typescript": {
"singleQuote": true,
"spaceBeforeFunctionParen": true,
"eslintIntegration": true,
}
},
.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'#vue/standard'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"space-before-function-paren": ["error", "always"], //setting this to 'never' removes the error highlight in vue files, not js files
},
parserOptions: {
parser: 'babel-eslint',
sourceType: "module"
}
}
I've read a zillion questions and set the space-between-function-parentheses in every possible setting that I found in the answers. Still the linting process finds a way to ignore all those settings and implement a different one. Not to mention that it highlights errors not consistent with the auto-formatting. Is there any other setting that I am still missing?
Try this:
npm install prettier#v1.19.1 --save-dev --save-exact
and then restart VS Code.
Prettier just recently updated to v2 and if your project doesn't have prettier installed locally it will use VS Code's version, which is most probably the latest version. In prettier v2 the space-before-function-paren has become a default and hence will be applied on all your projects that don't have a local version of prettier pre v2 installed. For me using any config combination didn't seem to work - it's like prettier just ignored all of them. Hope this helps.
Prior to Prettier v2, It seems to not support space-before-function-paren rule. So We should turn off the rule above to resolve conflict.
Try this
module.exports = {
rules: {
'space-before-function-paren': 'off'
}
}
in an ESLint configuration file(such as .eslintrc.js) located in root directory of project.
Then we should add following to settings.json in VS Code.
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
},
Last but not least, Disabling Vetur extension in VS Code might be a better choice.
I also had same exact issue with vetur and ESLint extns. Following in settings.json fixed it. By default it was prettier.
"vetur.format.defaultFormatter.js": "prettier-eslint",
error: Parsing error: Unexpected token ..
My lint gulp task is giving me issues on '.js' files, while '.jsx' are doing fine on ES6 syntax.
Notably, the "..." operator - for spread/rest etc.
Is there a way to get this to work? Here is part of my config. (I tried adding ".js: true", didn't help)
{
"parser":"espree",
"ecmaFeatures":{
"modules":true,
"jsx":true
},
You probably want to enable the experimentalObjectRestSpread parser option:
{
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"modules": true
}
}
Since Espree is already the default parser, you don't need to specify it unless you want to for clarity's sake.
I am trying to get Wallaby to work with a TypeScript app, using Browserify and Wallabify. However, when I run Wallaby, it outputs No failing tests, 0 passing, and all test indicators are grey.
The file app/spec.setup.ts is responsible for loading node modules dependencies such as chai, sinon, and the app's main module. app/spec.util.ts provides some helpers, imported by individual spec files.
module.exports = function() {
var wallabify = require('wallabify');
var wallabyPostprocessor = wallabify({
entryPatterns: [
'app/spec.setup.ts',
'app/src/**/*.spec.ts'
]
}
);
return {
files: [
{pattern: 'app/spec.setup.ts', load: false, instrument: false},
{pattern: 'app/spec.util.ts', load: false, instrument: false},
{pattern: 'app/src/**/*.ts', load: false},
{pattern: 'app/src/**/*.spec.ts', ignore: true}
],
tests: [
{pattern: 'app/src/**/*.spec.ts', load: false}
],
testFramework: 'mocha',
postprocessor: wallabyPostprocessor,
bootstrap: function (w) {
// outputs test file names, with .ts extensions changed to .js
console.log(w.tests);
window.__moduleBundler.loadTests();
}
};
};
What's interesting is that I don't get any feedback from changing entryPatterns, even setting it to an empty array or invalid file names. The result is still the same. Only if I remove it entirely, I get errors such as Can't find variable: sinon.
I've also figured that the entryPatterns list may need the compiled file names, i.e. .js instead of .ts extension. However, when I do that, I get Postprocessor run failure: 'import' and 'export' may appear only with 'sourceType: module' on spec.setup.ts.
I don't know what is the correct way to configure Wallabify for TypeScript compilation, and I couldn't find any complete examples on the web, so I'd appreciate any hints.
P.S. with my current StackOverflow reputation I couldn't add two new tags: wallaby and wallabify. Could someone do me a favour and add the two tags please.
Because TypeScript compiler renames files to .js and applied before wallabify, you need to change your entry patterns like this to make it work:
entryPatterns: [
'app/spec.setup.js',
'app/src/**/*.spec.js'
]