How can I disable eslint correct? - vue.js

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/

Related

Tailwind is not working on my vue project

I installed all of steps of Taiwlind but not working. How i fix it.
I just want to install to my project tailwind
There could be many reasons why Tailwind is not working in your project.
Make sure that you have installed Tailwind using the correct command in your terminal or command prompt, depending on your operating system. You can use the following command to install Tailwind:
npm install tailwindcss
Check that you have created a configuration file for Tailwind in your project. You can create a configuration file by running the following command in your
terminal
npx tailwindcss init
Ensure that you have included the Tailwind CSS file in your project. You can include the file in your HTML or CSS by adding the following line of code:
scss
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
Check that you have properly configured your build process to compile your CSS code. If you are using a build tool like Webpack or Gulp, you will need to configure it to compile your Tailwind CSS code.

Nuxt + Tailwind: My tailwind.config.js file has no effect and default config is used instead

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

Vue - Disable Eslint

I did some research, but could not find a quick fix to this situation:
Vue-cli 3.4.0 - Webpack 4.29.0
My project does not have config/index.js as mentioned here.
I tried to open vue.config.js and disable eslint does not work.
I removed the cli-plugin-eslint package.
Don't have .eslintrc.js.
Could not find any other configuration about eslint in project.
--- Fix ---
I realize that I didn't control my settings well. It was built in vetur.
the easiest way to ignore eslint is to ignore the files you dont want to be linted. For example, create .eslintignore in your project root folder. then just add the following folder which you dont want to lint like,
add src\

Disable PWA plugin in Vue CLI 3

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');
}
}

How to make Vue CLI and Vetur (in VS Code) generate code with double quotes

I use double quotes in my TypeScript and JavaScript code for strings.
But all the boilerplate generated by Vue CLI and the plugin Vetur (for VS Code) uses single quotes for strings. Is there a way to configure that?
Bonus: Additionally, I would love to see the generated code not have a semicolon…
There is currently no configuration to tell Vue CLI or Vetur how to generate the code, but you can auto-format the generated code with Vue CLI by running npm run lint. Running the command would report any lint errors and also automatically update your code to resolve the errors (if possible).
Assuming you selected TSLint as your linter in the Vue CLI generator prompts, you can edit the generated tslint.json file as follows:
{
"rules": {
- "quotemark": [true, "single"],
"quotemark": [true, "double"],
+ "semicolon": [true, "never"]
}
}
This does two things:
changes the quotemark rule to enforce double-quotes
adds a semicolon rule to disallow trailing semicolons
Now, run npm run lint to automatically fix the single-quotes and semicolons.