Stylelint skips entire folders - javascript

I have stylelint installed in my project, and I've configured its configuration.
I added a script to run this linter on my src folder.
For some reason, the linter scans only one folder.
Here is my configuration file stylelint.config.js:
module.exports = {
extends: [
'stylelint-config-standard-scss',
'stylelint-config-prettier-scss',
'stylelint-config-recess-order',
],
plugins: ['stylelint-scss', 'stylelint-order'],
rules: {
'selector-class-pattern': [
'^[a-z][A-Za-z0-9]*((--([a-z][A-Za-z0-9]*)(__([a-z][A-Za-z0-9]*))?)|(__([a-z][A-Za-z0-9]*)(--([a-z][A-Za-z0-9]*))?))?$',
{ resolveNestedSelectors: true, message: 'Expected class selector to be camel case' },
],
'value-no-vendor-prefix': null,
'selector-id-pattern': null,
'scss/at-import-partial-extension': null,
},
};
This is the script: "stylelint": "stylelint --f verbose src/**/*.scss",
My src folder has a lot of .scss files. But this script only scans 2 files for some reason.
$ stylelint --f verbose src/**/*.scss
2 sources checked
/Users/amir/Desktop/Development/Vinyl projects/LandingPag-REAL/src/styles/custom.scss
/Users/amir/Desktop/Development/Vinyl projects/LandingPag-REAL/src/styles/variables.scss
0 problems found
✨ Done in 0.79s.
Why would it ignores all other files? I don't have some "ignore" configuration file.
NOTE: It worked on Windows perfect (didn't skip), on Mac it skips almost the entire src file
Also when I change the script to run stylelint ... **/*.scss it does work

You need to quote your input glob, otherwise the shell (which differs on Windows and Mac) will interpret it rather than Stylelint itself.
If you're only targeting *nix, you can use single quotes:
"stylelint": "stylelint --f verbose 'src/**/*.scss'",
For cross-platform use escaped double quotes:
"stylelint": "stylelint --f verbose \"src/**/*.scss\"",
Incidentally, you:
can remove the plugins property as both plugins are bundled in their respective configs
should put the prettier config last so that it overrides everything before
{
"extends": [
"stylelint-config-standard-scss",
"stylelint-config-recess-order",
"stylelint-config-prettier-scss"
],
"rules": {
"selector-class-pattern": [
"^[a-z][A-Za-z0-9]*((--([a-z][A-Za-z0-9]*)(__([a-z][A-Za-z0-9]*))?)|(__([a-z][A-Za-z0-9]*)(--([a-z][A-Za-z0-9]*))?))?$",
{
"resolveNestedSelectors": true,
"message": "Expected class selector to be camel case"
}
],
"value-no-vendor-prefix": null,
"selector-id-pattern": null,
"scss/at-import-partial-extension": null
}
}

Related

How to remove unused imports with a command?

I have files in my nx project with import declaration without any use and I want to remove them.
After I searched in stackoverflow I found the answer to open the file in vscode, and press alt+shift+o and when the declaration is not used then it's remove and sort the import.
But I have 10,000 files. so is there a command to do that in all those files? I looking in eslint but there is no rule for that.
Install the no-unused-imports plugin
Add unused-imports to the plugins section of your .eslintrc file
{
"plugins": ["...", "unused-imports"]
}
add the following rules
"no-unused-vars": "off",
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"warn",
{ "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
],
Then add script to your package.json file
"scripts": {
...
"fix-lint-errors": "eslint nx --fix"
},
from command line run the script
npm run fix-lint-errors
or
yarn fix-lint-errors
If you are a heavy vscode user, so you can simply open your preference settings then add the following to your settings.json:
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
Or you can make a stand alone tslint file that has the following in it:
{
"extends": ["tslint-etc"],
"rules": {
"no-unsed-declaration: true"
}}
Then run the following command to fix the imports:
tslint --config tslint-imports.json --fix --project
Then use
ng build
or
ng build name_of_project --configuration=production

ava + ts-node converting .spec.ts files into .ts

I am running ava with ts-node with the following config:
"ava": {
"files": [
"tests/**/*",
"!test/exclude-files-in-this-directory",
"!**/exclude-files-with-this-name.*"
],
"failFast": true,
"failWithoutAssertions": false,
"extensions": [
"spec.ts",
"ts"
],
"environmentVariables": {
"NODE_ENV": "test"
},
"require": [
"ts-node/register",
"tsconfig-paths/register"
],
"tap": false,
"verbose": true
}
The problem is that .spec.ts files don't get recognized, as ts-node is doing some kind of conversion (I think) of the .spec.ts files into just .ts, which means that the extension with spec.ts is never matched.
Here's the output of the tests
- graphql › stage-2 › workspace.ts › do later
✔ general › functions.ts › returns proper difference
The files are named workspace.spec.ts and functions.spec.ts
Is there anyway for ts-node to not drop the spec part?
ts-node should only kick in when AVA requires the test file. I can't immediately spot why this isn't working. Are those spec.ts files inside the tests directory?
P.S. NODE_ENV already defaults to test, and you don't need to disable tap either.

ESLint define folder in config file. (Ignore all but..., Include only...)

How to set the folder to lint in the .eslintrc.json file, instead after the eslint command in package.json.
package.json (snippet)
"scripts: {
"lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
}
I want only:
"scripts: {
"lint": "eslint",
}
and define the path and ext in the .eslintrc.json.
Alternativ, set .eslintignore to ignore ALL but not ./src.
I only want to lint the src-folder. Not the root.
Also for the eslint plugin of vscode.
My current solution:
.eslintignore
/*
!/src
But I wondering, why is there no option in the config files to set the folder/s to lint.
I'm looking for the most common and elegant solution.
Maybe it sounds like a duplicate here. But I searched a lot of topics and found nothing similar to solve my problem.
Set in overrides inside .eslintrc.json
If you specified directories with CLI (e.g., eslint lib), ESLint searches target files in the directory to lint. The target files are *.js or the files that match any of overrides entries (but exclude entries that are any of files end with *).
{
"rules": {
"quotes": ["error", "double"]
},
"overrides": [
{
"files": ["bin/*.js", "lib/*.js"],
"excludedFiles": "*.test.js",
"rules": {
"quotes": ["error", "single"]
}
}
]
}
Refer: document of Configuring ESLint
I've adapted your solution with the .eslintignore file and put the rules directly into my config file's ignorePatterns option (.eslintrc.cjs in my case). Works like a charm for me:
module.exports = {
ignorePatterns: ['/*', '!/src']
[...]
}
In addition to #billythetalented's comment I had to add a dot in the package.json:
"scripts": {
"lint": "eslint .",
...
}
Otherwise, It didn't lint anything

Eslint: disable all rules except 1 rule?

I want to use Eslint to check the output of my minifier. Obviously, this would trigger a lot of errors. I'm only interested in a single rule (compat/compat). How can I disable all the other ones?
Edit:
Here's my .eslintrc.js:
module.exports = {
extends: ['plugin:compat/recommended'],
env: {
browser: true,
},
};
Edit:
I found the reset option in the docs, but it seems to be disabled for my installation:
$ npx eslint file.js --config .eslintrc.browserslist.js --quiet --reset
Invalid option '--reset' - perhaps you meant '--ext'?
$ npx eslint --version
v6.8.0
$ npx eslint -h
eslint [options] file.js [file.js] [dir]
Basic configuration:
--no-eslintrc Disable use of configuration from .eslintrc.*
-c, --config path::String Use this configuration, overriding .eslintrc.* config options if present
--env [String] Specify environments
--ext [String] Specify JavaScript file extensions - default: .js
--global [String] Define global variables
--parser String Specify the parser to be used
--parser-options Object Specify parser options
--resolve-plugins-relative-to path::String A folder where plugins should be resolved from, CWD by default
Specifying rules and plugins:
--rulesdir [path::String] Use additional rules from this directory
--plugin [String] Specify plugins
--rule Object Specify rules
Fixing problems:
--fix Automatically fix problems
--fix-dry-run Automatically fix problems without saving the changes to the file system
--fix-type Array Specify the types of fixes to apply (problem, suggestion, layout)
Ignoring files:
--ignore-path path::String Specify path of ignore file
--no-ignore Disable use of ignore files and patterns
--ignore-pattern [String] Pattern of files to ignore (in addition to those in .eslintignore)
Using stdin:
--stdin Lint code provided on <STDIN> - default: false
--stdin-filename String Specify filename to process STDIN as
Handling warnings:
--quiet Report errors only - default: false
--max-warnings Int Number of warnings to trigger nonzero exit code - default: -1
Output:
-o, --output-file path::String Specify file to write report to
-f, --format String Use a specific output format - default: stylish
--color, --no-color Force enabling/disabling of color
Inline configuration comments:
--no-inline-config Prevent comments from changing config or rules
--report-unused-disable-directives Adds reported errors for unused eslint-disable directives
Caching:
--cache Only check changed files - default: false
--cache-file path::String Path to the cache file. Deprecated: use --cache-location - default: .eslintcache
--cache-location path::String Path to the cache file or directory
Miscellaneous:
--init Run config initialization wizard - default: false
--env-info Output execution environment information - default: false
--no-error-on-unmatched-pattern Prevent errors when pattern is unmatched
--debug Output debugging information
-h, --help Show help
-v, --version Output the version number
--print-config path::String Print the configuration for the given file
If you want to use your .eslintrc file to keep your configuration (parser, plugin settings, etc), you can use eslint-nibble with the --rule=compat/compat flag. This will respect your normal configuration, but only show you errors from that one rule.
Disclaimer: I'm the creator of eslint-nibble.
You can add root: true to the config file, that way it will not inherit the other config files.
The eslint.json file should look like this:
module.exports = {
root: true,
rules: {
semi: ["error", "always"],
}
};
Simply specify the rule you want to use in your ESLint config, for instance this would enable only the "semi" rule:
module.exports = {
"rules": {
"semi": ["error", "always"],
}
};
https://eslint.org/docs/user-guide/configuring#configuring-rules
Or you could specify it with the --rule flag
Eslint's parser options currently default to ecmaVersion: 5[1]. So in case, your code is using ECMAScript > 5, eslint will start enforcing the rules of ECMAScript 5, 6, and so on. Hence, apart from defining root: true, it's important finding the right ecmaVersion. An ideal eslint config for projects beyond ECMAScript 5 that has all eslint rules disabled looks as follows:
module.exports = {
root: true,
parserOptions: {
ecmaVersion: 9
},
rules: {}
};
Where parserOptions.ecmaVersion is tuned to the code base's ECMAScript version.
1: https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options

Visual Studio Chutzpah Running test on different projects with AMD modules

I have two projects under a solution, one is my main web project, say MyProject and the other serves for testing purposes, say MyProject.Tests.
Solution
MyProject
MyProject.Tests
I want to have my JavaScript headless tests running to the second one.
On the first project, all the javascript files are under the Scripts directory, like so:
Scripts/
Common.js
Libs/
jquery/
jquery.js
requirejs/
require.js
At the test project, I have my chutzpah.json file on root.
MyProject.Tests
chutzpah.json
Tests/
Specs/
spec.js
The file has this configuration:
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Tests": [ { "Path": "Tests/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": ["*Common.js"],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
But when I try to run the spec file I get an error.
Spec file:
define(["jquery"], function ($) {
//code here. Doesn't matter, the error is because of the jquery module
});
The error, is this:
Error: Error opening C:/Users/g.dyrrahitis/Documents/Visual Studio 2013/Projects/MySolution/MyProject.Tests/Scripts/Libs/jquery/jquery.js: The system cannot find the path specified.
The thing is that chutzpah tries to find my jquery module at the test project rather the main project, where it resides.
Why I'm getting this kind of behavior and how can I solve this please? I've been trying for hours to tackle this with no luck so far.
Note
*The names MySolution, MyProject, MyProject.Tests are used for clarity, rather than using the real names.
I've found it, the chutzpah file hadn't the right configuration options (as expected) for the test harness directory.
I needed the TestHarnessDirectory and TestHarnessLocationMode options to explicitly instruct it to look at my main project directory.
This now is the correct one:
{
"TestHarnessDirectory": "../MyProject",
"TestHarnessLocationMode": "Custom",
"TestHarnessReferenceMode": "AMD",
"Framework": "jasmine",
"Tests": [ { "Path": "JavaScript/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": [ "*Common.js" ],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
Just needed to tell chutzpah that the harness location mode is custom, in order to provide a directory for it, which is the root of my main project.
Beware for the right configuration paths then, you may end up struggling for hours like me to find a solution. And read the documentation thoroughly (which I hadn't done).

Categories

Resources