Need help to complete installation of linter-stylelint for Atom - stylelint

I am really sorry for this newbie question but I can't see how solve that...
I installed linter-stylelint and tried to configure it like it's said there:
https://atom.io/packages/linter-stylelint
So:
- I placed a stylelint.config.js file in my project.
- In the settings, I checked Use standard
- But can't see what I have to do to "Add a stylelint section in your package.json"
On my Mac I see the file:
/Users/eric/node_modules/stylelint-config-standard
But I don't know what code do I have to insert inside...
By the way, when I try to use linter-stylelint in a css file I get the error message:
Unable to parse stylelint configuration
Unexpected token :
In my stylelint.config.js, I have the following code for now:
{
"extends": "stylelint-config-standard"
"rules" {
"no-unsupported-browser-features": [ true, { "severity": "warning" }]
}
}
Thanks if you can help me!
;)
Paul

So: - I placed a stylelint.config.js file in my project. - In the settings, I checked Use standard
According to the docs you reference, you should either place a stylelint.config.js file or check "Use standard".
I get the error message Unable to parse stylelint configuration Unexpected token :
This is because the JSON of your configuration file is invalid. It is missing both a comma and a colon. Use a service like JSONLint to validate JSON. Your fixed config is:
{
"extends": "stylelint-config-standard",
"rules": {
"no-unsupported-browser-features": [true, {
"severity": "warning"
}]
}
}
Even though this config is valid JSON, it won't work because the no-unsupported-browser-features rule is no longer built into stylelint. It is, however, available as a plugin. You'll need to follow the plugin's instructions if you wish to use it.
I am really sorry for this newbie question
It's fine. We are all newbies in the beginning! As you're just getting started with stylelint, I suggest you remove the stylelint.config.js file and ensure the "Use Standard" box is checked. This is likely the quickest way to get going. Once you are more comfortable with the tool, you can investigate creating your own configuration file for your specific needs.

Related

How to add Babel support for nullishCoalescingOperator to vue project?

In my Vue-CLI project, when I tried using the ?? operator, I got this error:
Syntax Error: SyntaxError: /Users/stevebennett/odev/freelancing/v-map/src/components/Map.vue: >Support for the experimental syntax 'nullishCoalescingOperator' isn't currently enabled (30:29):
...
Add #babel/plugin-proposal-nullish-coalescing-operator (https://git.io/vb4Se) to the 'plugins' section of your Babel config to enable transformation.
I installed #babel/plugin-syntax-nullish-coalescing-operator (its name seems to have changed), added it to my babel.config.js:
module.exports = {
presets: ['#vue/app'],
plugins: ['#babel/plugin-syntax-nullish-coalescing-operator'],
};
Now the error message seems to have gone backwards, no reference to the operator name at all:
Module parse failed: Unexpected token (39:35)
You may need an appropriate loader to handle this file type.
| case 8:
| points = _context.sent;
console.log(sheetID ?? 37);
What am I doing wrong?
For me, the #babel/plugin-syntax-nullish-coalescing-operator plugin would not work, which is the one you are using.
I had to use the #babel/plugin-proposal-nullish-coalescing-operator plugin which is the one that the error message suggests you use.
Additionally, I noticed this on the page for the #babel/plugin-syntax-nullish-coalescing-operator plugin:
I can't say for sure if this will fix your problem, but it certainly fixed mine

TSLint Config in VS Code

I'm trying to configure the max line length (among other settings) for TS Lint in VS code but no matter what changes I make it doesn't 'take'.
So, the first strange thing is that VS code's TS Lint error for max line length says I've exceeded the 140 character limit but in the various config files I've found it only ever mentions 120 characters as the default.
I've changed this to 200 characters, disabled / enabled the extension but still get the 140 character warning. Does anyone know where and how to configure this setting? The documentation online is clear enough but I don't appear to have a tslint.json file and within the node_modules => tslint => lib => rules folder the setting is 120 and changing it makes no difference.
Edit 2020-09-30
Microsoft deprectaded the old plugin and released a newer, completely rewritten version with additional features here.
For the new plugin the setting "tslint.enable": true does not exists and is not needed anymore.
Original Answer
You need to create a tslint.json (in your workspace root) and set something like this to disable the maximum line length:
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {
"max-line-length": [false]
},
"rulesDirectory": []
}
Furthermore, ensure that the following options are set in the in the vscode user settings (settings.json):
"tslint.configFile": "./path/to/tslint/relative/from/workspaceroot/tslint.json",
"tslint.enable": true
The tslint.configFile option can be empty if the file is in the root directory of your workspace.
Further rules can be found here.

Make ng-http-loader run with SystemJs

I want to add the ng-http-loader library to my Angular5 project, but I do not know how to get it running with SystemJS. I know I have to add something to the systemjs.config, but I tried to target several files inside the node_modules/ng-http-loader/ directory or the directory itself, but I always get the error, that he can't find the module.
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng-http-loader/ng-http-loader.module
wrapFn#http://localhost:3000/node_modules/zone.js/dist/zone.js:1166:30
ZoneDelegate.prototype.invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:425:17
Zone.prototype.runTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28
ZoneTask.invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:499:24
invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:1540:9
globalZoneAwareCallback#http://localhost:3000/node_modules/zone.js/dist/zone.js:1566:17
Error loading http://localhost:3000/ng-http-loader/ng-http-loader.module as "ng-http-loader/ng-http-loader.module" from http://localhost:3000/app/app.module.js
Stack trace:
(SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng-http-loader/ng-http-loader.module
wrapFn#http://localhost:3000/node_modules/zone.js/dist/zone.js:1166:30
ZoneDelegate.prototype.invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:425:17
Zone.prototype.runTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28
ZoneTask.invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:499:24
invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:1540:9
globalZoneAwareCallback#http://localhost:3000/node_modules/zone.js/dist/zone.js:1566:17
Error loading http://localhost:3000/ng-http-loader/ng-http-loader.module as "ng-http-loader/ng-http-loader.module" from http://localhost:3000/app/app.module.js
I also asked the author, but he is not experienced with systemjs and therefore was not able to help me. Does anybody else know which file I should target?
Thanks in advance.
Having never used ng-http-loader, try this as a starting point:
System.config({
"paths": {
"npm:": "node_modules/"
},
"map": {
"ng-http-loader": "npm:ng-http-loader"
},
"packages": {
"ng-http-loader": {
"main": "ng-http-loader.module.js",
"defaultExtension": "js"
}
}
It's possible that other mappings are required in addition to the above e.g. to the components folder etc.

how do you get flow to work with babel module-alias?

I am trying to get flow to type check my code but it is giving me an error when it can't find paths that have been rewritten using babel-plugin-module-alias.
I have unsuccessfully tried to use the resolve_dirname option in the flowconfig.
Can someone please tell me if it is possible to use this babel plugin with flow?
.babelrc
{
"plugins": [
"transform-flow-strip-types",
["module-alias", [
{ "src": "./app", "expose": "app" },
]]
]
}
.flowconfig
[options]
module.system.node.resolve_dirname=app
app/main.js
import bar from 'app/foo';
app/main.js:3
3: import bar from 'app/foo';
^^^^^^^^^^ app/foo. Required module not found
module.system.node.resolve_dirname actually tells Flow where to start resolving things from. If you want Flow to resolve starting from 'app', you need to point it one directory higher than app.
Alternatively, you can probably also use `module.name_mapper='^app/([a-z-A-Z0-9$_/]+)$' -> 'src/\1'
Here is how this can be achieved with module.name_mapper setting in .flowconfig [options]. Works in flow version 0.56.0
module.name_mapper='^app/\([-a-zA-Z0-9$_/]+\)$' -> '<PROJECT_ROOT>/src/\1'

Ignore "cannot find module" error on typescript

Can the Typescript compiler ignore the cannot find module 'x' error on import expressions such as:
//How to tell the compiler that this module does exists
import sql = require('sql');
There are multiple npm libraries such as node sql that doesn't have existing typings
Is there a way to tell the compiler to ignore this error other than creating a new definition file with the declare module x ... ?
As of TypeScript 2.6 (released on Oct 31, 2017), now there is a way to ignore all errors from a specific line using // #ts-ignore comments before the target line.
The mendtioned documentation is succinct enough, but to recap:
// #ts-ignore
const s : string = false
disables error reporting for this line.
However, this should only be used as a last resort when fixing the error or using hacks like (x as any) is much more trouble than losing all type checking for a line.
As for specifying certain errors, the current (mid-2018) state is discussed here, in Design Meeting Notes (2/16/2018) and further comments, which is basically
"no conclusion yet"
and strong opposition to introducing this fine tuning.
If you just want to bypass the compiler, you can create a .d.ts file for that module, for instance, you could create a sql.d.ts file and inside have this:
declare module "sql" {
let _sql: any;
export = _sql;
}
Solved This
By default #ts-check looks for definitions of a module, either its your own code or external libraries.
Since we are not using ES6 style modules, then we must we are using
commonjs, check my jsconfig.json file for help.
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"lib": ["es5", "es6", "es7"]
},
"include": ["src/**/*"],
"exclude": ["node_modules"],
"typeAcquisition": { "enable": true }
}