I have a vue.js project with the storybook addon. I am trying to write a story using the Docs addon which allows you to write stories in .mdx, I am having trouble getting linting to work in vs code.
Thanks in advance and any help would be much appreciated!
I am using this sample project found here https://github.com/vueschool/storybook-fundamentals/tree/master.
The sample project has "eslint": "^6.7.2" installed.
I have installed "eslint-plugin-mdx": "^1.8.2"
I have the following extensions installed
My ES lint config looks like this, as suggested by https://github.com/mdx-js/eslint-mdx
{
"extends": ["plugin:mdx/recommended"]
}
It seems like vs code is picking up the mdx file but no linting seems to be happening, I'm I doing something wrong?
Also I have added the following to VS Code settings but it does not seem to be doing much
If this helps anyone. there is a dependency on eslint-plugin-react for eslint-mdx to work.
check https://github.com/mdx-js/eslint-mdx/issues/229
my eslint config looks like this for reference.
"root": true,
"env": {
"node": true
},
"extends": [
"eslint:recommended", "plugin:mdx/recommended", "plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
}
Related
Not sure what's going on here.
I am working on migrating from tslint to eslint. The basic migration seems to have gone smoothly (well, "smoothly" -- got some kinds in the rules that need to get worked out apparently), but I've run across this and I have no idea how to get past it:
1:1 error Definition for rule '#typescript-eslint/no-shadow' was not
found #typescript-eslint/no-shadow
I've modified the .eslintrc.js file like so (parts snipped for brevity):
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "tsconfig.json",
"sourceType": "module"
},
"plugins": [
"eslint-plugin-import",
"#angular-eslint/eslint-plugin",
"#typescript-eslint",
"#typescript-eslint/tslint"
],
"rules": {
// Many unrelated plugins, all rules, none mentioning no-shadow
"no-shadow": "off",
"#typescript-eslint/no-shadow": ["error", { "hoist": "all" }],
// Many other unrelated plugins, all rules, none mentioning no-shadow. But I thought
// This next one may be helpful.
"#typescript-eslint/tslint/config": [
"error",
{
"rules": {
"import-spacing": true,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}
]
}
};
The versions of the plugins I'm working with are (copied from package.json):
"eslint-plugin-import": "^2.19.1",
"#typescript-eslint/eslint-plugin": "^2.34.0",
"#typescript-eslint/parser": "^2.34.0",
I'm at a loss as to what's going on, and my google searches have turned up nothing aside from "use "no-shadow": "off", which I do.
v2.34.0 of the typescript-eslint packages is 9 months old.
Upgrade to a more recent version of typescript-eslint.
#typescript-eslint/no-shadow was added in v4.0.0
I have an application created using the create-react-app.
I need to disable one rule from the default CRA Lint rules:
"react-hooks/exhaustive-deps": 0
After checking all of the resources about the topic and I'm still failing to disable that rule. I made an .env file with EXTEND_ESLINT=true
and I've included the following in my .eslintrc in the root directory
{
"eslintConfig": {
"extends": ["react-app"],
"overrides": [
{
"rules": {
"react-hooks/exhaustive-deps": 0
}
}
]
}
}
EDIT based on the comments suggestions:
Aditionally, moving the .eslintrc conents to package.json is not working either.
Package.json
"eslintConfig": {
"extends": [
"react-app",
"shared-config"
],
"rules": {
"react-hooks/exhaustive-deps": 0
}
},
Am i missing something ? Please advice if possible :)
Background
I'm an absolute beginner in BuckleScript, and while I've downloaded packgages with npm before, I've never written a library.
Goal: installing my new package local package in my project using npm
I am trying to wrap some parts of the service worker api in JavaScript. I have started with a file bs-service-worker/src/ExtendableEvent.re like so
type _extendableEvent('a);
type extendableEvent_like('a) = Dom.event_like(_extendableEvent('a));
type extendableEvent = extendableEvent_like(Dom._baseClass);
[#bs.send] external waitUntil: (extendableEvent, Js.Promise.t('a)) => unit
= "waitUntil";
This compiles and produces ExtendableEvent.bs.js as expected.
Now, though, I'd like to go ahead and test what I have so far by creating a new npm project and importing what I have locally. I created a new sibling directory and did an npm install ../bs-service-worker. That succeeded, and then I did a sanity-check build on my new BuckleScript project. That also succeeded.
The issue: opening my module causes an error
When I add open ExtendableEvent; to Demo.re in the new project, I get the following error:
We've found a bug for you!
/home/el/workbench/bucklescript/bs-service-worker-examples/src/Demo.re 11:6-20
9 │
10 │ /**/
11 │ open ExtendableEvent;
12 │
13 │ /*
The module or file ExtendableEvent can't be found.
- If it's a third-party dependency:
- Did you list it in bsconfig.json?
- Did you run `bsb` instead of `bsb -make-world`
(latter builds third-parties)?
- Did you include the file's directory in bsconfig.json?
What I've tried
I'm guessing I'm misusing BuckleScript here instead of npm because npm is so widely adopted and well documented that I think I'd have found the problem, but I'm definitely not ruling out the possibility that I'm misusing npm, too.
I do have "bs-service-worker" listed as a bs-dependency. I also tried "../bs-service-worker" in case BuckleScript didn't like the virtual directory, but it didn't seem to help.
My npm run build command is indeed npx bsb -make-world.
More code:
bs-service-worker/bs-config.json
{
"name": "bs-service-worker",
"version": "0.1.0",
"sources": {
"dir" : "src",
"subdirs" : true,
"public": "all"
},
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".bs.js",
"bs-dependencies": [
],
"warnings": {
"error" : "+101"
},
"namespace": true,
"refmt": 3
}
bs-service-worker-examples/bsconfig.json
{
"name": "bs-service-worker-examples",
"version": "0.1.0",
"sources": {
"dir" : "src",
"subdirs" : true
},
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".bs.js",
"bs-dependencies": [
"bs-service-worker",
"bs-fetch",
],
"warnings": {
"error" : "+101"
},
"namespace": true,
"refmt": 3
}
bs-service-worker-examples/package.json
{
"name": "bs-service-worker-examples",
"version": "0.0.1",
"scripts": {
"build": "npx bsb -make-world",
"start": "npx bsb -make-world -w",
"clean": "npx bsb -clean-world"
},
"keywords": [
"BuckleScript"
],
"author": "Eleanor (https://webbureaucrat.bitbucket.io)",
"license": "MIT",
"devDependencies": {
"bs-platform": "^7.3.2"
},
"dependencies": {
"bs-fetch": "^0.6.1",
"bs-service-worker": "file:../bs-service-worker"
}
}
Easy Reproduction of the Issue
The fastest way to reproduce this would be to fork this repository and try to add it as a local npm dependency.
The problem seems to be that you have "namespace": true in your library's bsconfig.json, which will wrap all the modules in a namespace module with a silly generated name based on the name field. In this case it will be BsServiceWorker I think.
You could just remove that setting, or set it to false, but namespacing is a good idea to avoid collisions between modules from different libraries, or your own app, so I would recommend setting it to a custom, sensible name. For example:
"namespace": "ServiceWorker"
You can then open ExtendableEvent in the consumer project with:
open ServiceWorker.ExtendableEvent;
For more details, see the documentation on the namespace field.
I just created a new Vue app through Vue CLI but I can't use either debugger or console.log otherwise I get an error in the browser, why and how can I allow it ?
Unexpected 'debugger' statement (no-debugger) at src/components/SomeComponent.vue:48:7
In my case it was because I went with the default configs when creating my project and it includes eslint:
So in order to allow debugger and console.log statements I modified the rules on my package.json file like this:
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": 1,
"no-debugger": 1
},
"parserOptions": {
"parser": "babel-eslint"
}
}
This way I still get a warning when compiling so I don't forget to remove them before committing but I can run my app and use those statements.
You can use:
//eslint-disable-next-line no-console
only if your really have to use console.log()
otherwise I highly recommend to use a logger like 'vuejs-logger'.
What happens is like in production you still have these console.log lines that I actually don't like a lot... plus the warning during rebuilding prevents you from using the hot reload of your app during development.
I generated an app using vue-cli 3.0.0-rc.3
Now I want to debug it using Visual Studio Code (Debugger for Chrome) however I can't seem to find the option to turn on sourceMaps.
I set the breakpoint in VSCode but it is not hit.
If I specify: "sourceMaps: true" in vue.config.js, I got an error "Invalid options in vue.config.js: "sourceMaps" is not allowed"
What option needs to be set for debugging to work?
According to the Official cookbook these steps needs to be done:
vue.config.js file has to be edited and add:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
then launch.json should look like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
After these steps breakpoints started to work as expected.
In addition to the above, I also had to follow the steps in this post: Visual Studio Code breakpoint appearing in wrong place
In particular, setting the sourceMapPathOverrides property. Finally got my breakpoints to work in Visual Studio Code using Vue.js. :)