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.
Related
I've got a private npm package hosted on GitHub. The package is essentially a Vue component and I build it with vue-cli-service build --target lib --name init-map src/main.ts. Here's the main.ts's contents:
import InitMap from "./components/InitMap.vue";
export { InitMap };
I use the package inside my other project, and I develop them both simultaneously. Therefore, I want to link the package: yarn link (inside the package directory), then yarn link #smellyshovel/init-map inside the consuming-project directory.
The problem is that when I run "yarn serve" (i.e. vue-cli-service serve) inside the main project, it freezes on 69%...
... and seems to stay like that forever.
Axios doesn't seem to be a problem to me (even though the message), since 1) everything is working fine without the linked package, 2) it shows a different message sometimes (something bootstrap-vue-related on 58%) though I only saw this other message like once (and not sure what exactly caused the difference).
What am I doing wrong? Why does the serve freezes when using a linked package as a dependency? How do I solve this?
Please, name me any other stuff you would like me to show since I'm not sure what exactly could be related to the issue and therefore haven't included any details that might be of interest.
OK, the problem indeed seems to be related to resolving symlinks, and the solution would be to simply prevent webpack from resolving these symlinks: https://github.com/vuejs/vue-cli/issues/1494#issuecomment-498144990
configureWebpack: {
resolve: {
symlinks: false,
},
}
I'm working on putting together a small app using vue, and I specifically need it to run on a device that does not support ES6. I'm using vue-cli-service build to build, and when trying to open this page on my ES5 device, I'm seeing this error SyntaxError: Unexpected token '...'. Expected a property name.
I have installed babel, and added this to my .babelrc: { "presets": ["#babel/preset-env"] }
I'm not really sure what else to try, I haven't been able to find anything that specifically addresses this. Even the vue-cli-service documentation suggests ways to support polyfill for ES5, but I don't think this is the same thing.
I had this problem with Vuetify and Safari 11.1
I guessed I needed to transpile the ES6 version of Vuetify for older browsers. The solution was difficult to search for, as most of the suggestions were about modifying webpack or babel configuration, which I find obscured inside Vue CLI.
I eventually uncovered the solution myself by rebuilding my project from scratch via Vue CLI, and the installer magically added a transpilation option for Vuetify which I was missing - I think because I had previously upgraded Vuetify across the ES5 to ES6 versions, and perhaps their upgrade script doesn't perform this step.
vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
],}
this is the equivalent of webpack
build: {
transpile: ['vuetify']
}
Restart the build and reload.
Of course you will need to find which of your packages it is - this is just an example. I just dug around in the error stack until finding something which belonged to Vuetify.
When i'm writing my dependencies in my package.json it should have intellisense for the package i'm trying to put inside dependencies
ex:
"bootstr" => should show a list of sugestion with "bootstrap" in it...
I get a list with one item => "bootstr"
so it doesn't make any sense...
I've tried in all my other project and i'm getting this problem.
What is broken ?
There are a lot of potential causes of this problem. Here are a couple of issues that I have run into before:
1. VS Code Settings
What to check:
Go to settings.json (there will be at least two of these for you, one for your workspace and one for your user)
Open settings:
Ctrl+, (or File->Preferences->Settings)
Open settings.json:
Make sure to check all versions of the settings:
I think there are a few settings that can cause this, so you might want to search for settings with json, but the files.associations is one that can break intellisense for package.json:
"files.associations": {
"*.json": "javascript"
},
Fix:
Delete the *.json (or other json) entry
2. Malformed package.json
What to check:
Make sure npm can parse your package.json
Fix:
Make sure your package.json is properly formed (No missing comma, no extra brackets, no comments)
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.
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.