In my vue.config.js file, I set
module.exports = {
lintOnSave: false
}
but it doesn`t work.
Vue project how to close eslint validate?
Here is how to make a fully functional ESlint + Prettier configuration and have it saved in your VScode editor (or any other one able to properly run an ESlint configuration): https://stackoverflow.com/a/68880413/8816585
Tell me if you have any more issues regarding the configuration.
Related
I have followed the official Tailwind + Nuxt documentation to add Tailwind to Nuxt. I have done so for 2 new Projects and 1 existing Nuxt project. And it works fine for the first 2 projects, but...
The existing Nuxt project is giving me a hard time now as it seems to ignore the tailwind.config.js file.
Tailwind works but it is using the default config, no matter what changes I make to the config file. Nuxt also does not hot-reload when changes are made to the config.
My IDE on the other hand detects the changes and offers them as IntelliSense auto-complete option.
I am pretty lost and not sure where to start troubleshooting. Happy to share the repo if that helps.
Any help greatly appreciated. Thanks!
-- Miss J
Did you register tailwindcss in the buildModules of the nuxt.config.js (and not modules) ?
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss'
],
Can you add some of your code to help troubleshoot ?
package.json
nuxt.config.js
tailwind.config.js
What are you trying to change inside the tailwind config ?
The Nuxt module for Tailwind CSS is using v1.9.6 and not the latest v.2.0.3, so some things you try to change in your config file following the docs are maybe not possible with the current nuxt package.
You can upgrade to latest Tailwind version :
https://stackoverflow.com/a/30650609/13541914
yarn add --dev tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
All I did was add a tailwind.config.js file.
Hope it helps
I had follow the reference : https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories, but it does not work
I want to disable it, because I have many warning when run npm run serve about extra semicolon, spaces etc
My project using vuetify
I make .eslintignore and add script like this :
../src/*.js
I try to run npm run serve, but the warning is still exist
I try to add :
"eslintIgnore": ["store.js", "Home.vue"] in the package.json, but it also does not work
Whereas I had follow the docs
How can I solve this problem?
Update :
I try change like this :
src/**/*.js
src/**/*.vue
It does not work
Eslint lint is a javascript opensource for linting utility. When you install a project using Vue cli, it automatically adds eslint-plugin to your project. It will have a es6 syntaxes guidelines, You can also create or disable the eslint rules.
If you want to disable eslint for a single line
just append this to a line of code
javascript code // eslint-disable-line
If you want to disable eslint for a complete file
/* eslint-disable */
code
/* eslint-disable */
If you want to remove eslint completely from a project which is
created by vue cli 2
Set useEslint: false, in config/index.js
If you are using vue cli 3
In .eslintrc.js just set
root: false
Else, if you want to remove eslint completely from project
npm remove #vue/cli-plugin-eslint
If you have .eslintignore, you can add these lines there
/build/
/config/
/dist/
/*.js
/test/unit/coverage/
/000-xyz/
I am importing some custom font files into scss file for a vuejs project. When build, it creates these font-related files in /dist folder, along with app.js and app.css files. The files include font-name.ttf, font-name.woff, font-name.woff2 and font-name.svg
I want to embed these font files in app.css file as in base64 data uri when project build.
There is an npm package named base64-inline-loader and this seems to be a good choice for my problem.
The documentation of the package indicates a method of using it with webpack config. Since my project is using vue-cli 3 and vue-cli-service to run build commands, I know I need to use vue.config.js file to properly config base64-inline-loader.
I am not a big webpack expert and only knows basic concepts of it. I am having trouble in configuring the package in vue.config.js file.
Hope there is somebody who already has some experience of using the same package preferably in Vue.js project.
Please provide me with the vue.config.js file that works :)
As seen from default Vue CLI webpack config, webpack processes font through url-loader:
webpackConfig.module
.rule('fonts')
.test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
.use('url-loader')
.loader('url-loader')
.options(genUrlLoaderOptions('fonts'))
So first off you need to delete previous loaders applied to that rule, and set up needed(base64-inline-loader).
module.exports = {
chainWebpack: config => {
const fontsRule = config.module.rule('fonts')
// clear all existing loaders.
// if you don't do this, the loader below will be appended to
// existing loaders of the rule.
fontsRule.uses.clear()
config.module
.rule('fonts')
.test(/\.(ttf|otf|eot|woff|woff2)$/)
.use('base64-inline-loader')
.loader('base64-inline-loader')
.tap(options => {
// modify the options...
return options
})
.end()
}
}
P.S. Helpful links:
Related question.
Replacing Loaders of a Rule.
Adding a New Loader.
I'm having some issues with caching my files using the default service worker that comes with VueCLI 3. I would prefer to just use the default browser caching mechanism, but can't seem to disable the PWA plugin as its not in the vue.config.js file. Passing a blank object to the pwa option doesn't work either as the object is merged and not overwritten.
I resolved this by doing the following:
Removing the registerServiceWorker.js file
removing the import of registerServiceWorker.js from main.js.
removing the PWA plugin from the devDependencies in package.json.
Vue enabled a method to disable pwa for certain builds in version 4. Now you can add --skip-plugins pluginname during your build. This one worked for me just fine:
npx vue-cli-service build --skip-plugins pwa,workbox
Ref: https://cli.vuejs.org/guide/cli-service.html#skipping-plugins
There is an open but accepted proposal to add this to the core functionality:
https://github.com/vuejs/vue-cli/issues/3830
EDIT:
Via command line:
https://cli.vuejs.org/guide/cli-service.html#skipping-plugins
npx vue-cli-service build --skip-plugins pwa,workbox
Via vue.config.js:
module.exports = {
chainWebpack: config => {
config.plugins.delete('pwa');
config.plugins.delete('workbox');
}
}
In Vue.js you have the possibility to use the # in a path file as a shortcut to your src folder. It is nice because all your files have an absolute path.
However I don't manage to find a way to configure WebStorm to understand that and allow me to follow and check if the file exist when using it.
Example :
import Business from '#/components/Business/Business'
Writing that I want WebStorm to tell me if the file does not exists and to allow me to go to that file directly.
I did not manage to find any answer about it and neither managed to find a way to do it in the IDE.
For vue-cli3, you need to specify a full path to node_modules/#vue/cli-service/webpack.config.js as a webpack configuration file in Settings | Languages & Frameworks | JavaScript | Webpack.
Note that this only works for JavaScript; webpack aliases are not resolved when using components written in TypeScript, path mappings in tsconfig.json should be used instead
In phpstorm 2020.3.3, I could fix this by
Opening Settings > Languages & Frameworks > JavaScript > Webpack and choose "Automatically"
Once saved, this opens a popup asking to run webpack configuration. Click "Trust project and run"
Fixed!
Webstorm already supports resolving alias. Webstorm read your webpack.config.js in background.
If you're using vue-cli 3, we don't have webpack.config.js, but you can create webpack.config.js file manually
module.exports = {
resolve: {
alias: {
"#": require("path").resolve(__dirname, "src") // change this to your folder path
}
}
};
webstorm will resolve it automatically
vue-cli3 you can select node_modules/#vue/cli-service/webpack.config.js as webstorm configuration file Settings > Languages & Frameworks > JavaScript > Webpack.
or create webpack.config.js in the root directory, content is
const resolve = dir => require('path').join(__dirname, dir);
module.exports = {
resolve: {
alias: {
'#': resolve('src')
}
}
};
And then as webstorm configuration file.