How to set up Airbnb ESLint in VS Code? - npm

I've tried for hours to set up ESLint using the Airbnb linter in Visual Studio Code. I ran the commands found here: https://www.npmjs.com/package/eslint-config-airbnb and set the peer dependencies to the correct versions, but still no luck. I always get this error:
Unexpected top-level property "“extends”". . Please see the 'ESLint'
output channel for details.
Does anyone know of a fix for this? I've read so many blogs and threads to no avail and am at the point where it seems like it's just more hassle than it's worth, though everyone says the Airbnb style guide is best for React.

Install the ESLint extension for VS Code. This will cause lint errors to show up inline, directly in the code editor (as opposed to just showing in the terminal when you use the command line).
Install eslint-config-airbnb and all of the dependencies (follow the instructions in the documentation). If you're using npm 5+, simply run this command in your terminal while inside of the project directory: npx install-peerdeps --dev eslint-config-airbnb.
Setup your ESLint configuration. You can add a basic config in your package.json file under the eslintConfig property, like so: "eslintConfig": { "extends": "airbnb" }
If you've done all of the above steps and are still getting the error you mentioned, see this thread, where a number of potential solutions are mentioned in the comments.
Specifically, in your case it sounds like your configuration is not getting read properly, for whatever reason. I would try adding it to your package.json as mentioned above to see if that solves it.

Related

React Native Xcode 13.2 Error no such file or directory for NativeVibration.js

After creating the project with react-native init, i found this issue in terminal as well as in xcode. After digging deep, i found that this particular file is showing missing in project node modules.
Here are example of error codes showing in xcode & terminal-
Error: ENOENT: no such file or directory,
/ios/Pods/../../node_modules/react-native/React/FBReactNativeSpec/../../Libraries/Vibration/NativeVibration.js
I've learned the hard way when programming in react native (for cross platform/hybrid application development), many unknown issues will be caused if you deviate from native OS clustering. Make sure you don't make the same mistakes as I have.
I have more specific help for you, apart from the obi wan style in my previously semi-answer.
Another guy had an issue with this a few years back, he asked and was answered,"delete your node_modules and app from simulator. Then re-install everything back, clear cache and see if it start bundler from root directory.
Before doing that, you can try 'react-native start' from your root directory.
I have seen that error message a lot, specifically with jest. But that's a different fix. I realize you are not using jest to test your reactjs, but it is jest tests runner that is the problem that causes the same outcome as you have come to- solution there is to disable the jest runner from running in the background while installing new packages.
I wonder if there isn't a similar solution here - only applicable to xcode - although you see it in terminal, that's probably just the cmdline not recognizing the path to the directory or at least that file.
Should be easy to figure out with terminal--
Go to $HOME~ type dir or ls, to see your directory folders, if you see the project listed, cd into it or, just search for the directory apt-get search [package] or apt, pkg, pip, pacman, snap etc etc whatever your flavor if OS terminal is, or search for the file-- $find / -iname [query] or even search for all paths containing the phrase: $locate [query]... If you created it, it exists. Just because xcode can't find it, and initial attempts in term produced nada, don't believe it is not in your system. just a matter of where, what, and why a process or dependancy is missing or malfunctioning in attempt to retrieve the file & open it.
You can definitely find it - i don't know jack about xcode, but terminal -- I can get anything from anywhere on cmdline-- you can too. I have to go, but I'm curious if you have figured it out. Let us know yeah? Best of luck to you. Cheers QwaziRidwanhasib.
-Cujo

Blazor Javascript isolation with NPM dependencies

I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html

eslint warnings no longer appear in create-react-app terminal

I updated react-scripts in create-react-app and all the eslint warnings that used to display in the terminal when I run npm start have disappeared. I know I have code that used to throw warnings, but now I always get the same message no matter what:
Compiled successfully!
You can now view annotation in the browser.
Local: http://localhost:3000
On Your Network: http://10.0.0.110:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
I don't have any custom settings (that I know of) so I'm trying to find out how to get the warnings back.
if you are using create-react-app, the configuration of eslint will be in node_modules/eslint-config-react-app/index.js, so take a look how it is inside, usually that will override any .eslintignore or .eslint.jrc that you may have, so go in there and settup the rules that you want to abide.
There were no custom settings for eslint in my app to change or fix as suggested in the other answer. I ended up running create-react-app and copying the code from the original project to the new project. This brought back the warnings I was looking for.
Maybe your package.json is missing eslintConfig:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
That’s what happened to me.
You can always access the ESLint output window by combining Ctrl+Alt+O. or you can simply click the taskbar at the bottom of the vscode, go to OUTPUT tab, and select ESLint from the dropdown provided.

NPM on LEMP cannot find module, wrong path

Total Linux noob here. I am trying to configure a Pleroma development environment on DO droplet. Installed LEMP, installed SSL, installed PostgreSQL, installed Pleroma, so far so good.
Then I installed Node, NPM, cloned Pleroma-FE (apparently it installs in /user/pleroma-fe folder). I am following the very brief build instructions here:
https://git.pleroma.social/pleroma/pleroma-fe
When I get to the command in those build instructions: npm run build
I am getting error: Error: Cannot find module '/user/build/build.js'
It's because actual path to the build file is /user/pleroma-fe/build/build.js
Apologies if this is a duplicate. I see other questions about this.
Fixing npm path in Windows 8 and 10
and the reply seems to set the PATH. This answer might apply to my situation. But my question is: it is clearly already looking in a well defined path (which is different from all the other questions, which don't seem to have well defined path in the error message). But it is the wrong path. How do I make it look in the correct path?
I tried the npm command and specified the complete path, and every variation. and none worked. So it seems fixing the path won't fix this problem.
Sorry I do not currently know enough Linux to be able to fix this. I tried to tag this with Pleroma but I don't have enough reputation to create a new tag. Any help is much appreciated. Thanks in advance.
I continued to work on this with some help of a Linux admin on Fiverr and the Pleroma developers chat with success, thanks to all.
The solution did not involve changing the path. There were several different things going on. First, I needed to change directory into the development project source folder:
cd pleroma-fe
Once I did that, npm found the build module. Next issue was Node was very old and I needed to get the latest version. I used the instruction here for NodeJS (10):
https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions
Next issue was npm was missing some modules. This was fixed with:
npm install
After that the build completed with no errors.
npm run build
After a successful build, you will see a list of files that have changed as a result of the build.
Next issue is that simple changes in HTML text were not live, ie. not reflected in the refreshed web page. This is fixed by copying all the resulting build files to the production folder using rsync. In my case the command was:
rsync -av /user/pleroma-fe/dist/ /home/pleroma/pleroma/priv/static/
Pleroma is a neat Twitter-like user interface to ActivityPub fediverse, it includes a Mastodon UI as well, and thanks to the developers for making it free and open source.

Remove plugins with vue-cli3

Is there a way to remove plugins and its configuration with vue-cli3 in an existing project? For example I want to replace unit test plugin Mocha with Jest. I know how to add and invoke a new plugin but I cannot find how to remove one. Is it possible with vue-cli or do I need to do it manually?
I've asked about this (How does one uninstall a plugin? #2540) and it appears the current official advice is to issue an npm uninstall X.
I think you can just go to your package.json and remove the entry for the plugin/package,
delete the directory of your node_modules,
and then run.
npm install
Delete the vuetify stuff[1] from your package.json and then run:
npm prune
[1] Dependency vuetify and dev dependencies vue-cli-plugin-vuetify, vuetify-loader...
It looks like you need to do it manually, I cannot find anything in the docs or CLI help that mentions removal of plugins. It is slightly more complicated than #alexandre-canijo says though. Besides the package.json there may be some config in your project folder. Check the src/plugins folder, and main.js.
The documentation
You have to do it manually. It worked for me.
In my case, I just removed the plugin ("vue-cli-plugin-quasar": "^2.0.1",) from devDependencies in package.json and ran npm install.
With the new "vue ui" option, removing installed cli-plugins is supported now.
Under "Dependencies" (second tab on the left of vue ui) you'll find all plugins listed. And on the right of each plugin there is a little trash icon, which removes the respective plugin.
You still might get compile errors due to dead references in your sources, but those can be identified quickly with the provided log and error messages.