I want to use autofix in .vue file, but Eslint only show the errors, no autofix.
How do I configure the .eslintrc to make it work?
Try to use it with specifying files extensions
eslint --fix --ext .js,.vue src
It will not work.
I had exactly the same issue and asked this question here (surprised you haven't found it).
I also asked them on Github and the answer is that they still not came with solution to use fix with plugins (vue-loader).
Eslint and VueJS files. Throwing errors but not fixing them
Here is thread on Github of Eslint: https://github.com/eslint/eslint/issues/7456#issuecomment-256757117
Hope it helps.
Assuming Vue.js 3, in your root directory, create a file vue.config.js, if not exists already, and insert:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
chainWebpack: config => {
config
.plugin('eslint')
.tap(args => {
args[0].fix = true
return args
})
}
})
Related
I want to use react-native-dotenv but its not working.
https://github.com/zetachang/react-native-dotenv
I created a .env file and added a FB_ID=21221
then I go to babel and edited like this:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo', 'react-native-dotenv'],
plugins: ['react-native-reanimated/plugin'],
};
};
I restarted it and want to access FB_ID but its not exists
react-native-dotenv maintainer. This is an old version of the documentation. The new documentation is on npm. This library is now a plugin not a preset. try plugins: ['react-native-reanimated/plugin', 'module:react-native-dotenv']. Also, the api.cache(true) doesn't help. Try api.cache(false) instead.
I believed the npm run serve command use the sourcemap by default for the js, but it seems not because I always see vue.runtime.esm.js:619.
I made a vue.config.js file at the root level project.
I try two things:
module.exports = {
configureWebpack: config => {
config.devtool = 'source-map'
}
}
and:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
None of them works. I still stuck with vue.runtime.esm.js:619 which is useless.
Does anyone know how really activate the source-map with vue-cli 4?
Using the generated vue.config.js from vue-cli v4 (generating a vue 3 project) It provided me this file:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
})
I then modified it to this:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
devtool: 'source-map',
}
})
Which works enough for me to enable VSCode debugging in Chrome/Electron.
*Edit
The error you are getting may be unrelated to source-maps and related to warnings from vue itself.
For example
runtime-core.esm-bundler.js:6584
[Vue warn]: Failed to resolve component: AMadeUpComponentName
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <MyView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>
Unfortunately this is a limitation of vue. However, improvements have been made between VueJS v2 and v3. Finally, I couldn't find an original source, but I read that improving the warning messages to track down the cause of warnings and errors is a high priority feature.
* Edit 10/12/2022
I had an older project that this answer didn't solve at all. After a yarn upgrade and #vue/cli upgrading, this configuration began working again!
You are looking for the ProjectOptions chainWebpack property.
chainWebpack?: (config: ChainableWebpackConfig) => void;
Try the following in your vue.config.js file:
/** #type import('#vue/cli-service').ProjectOptions */
module.exports = {
// https://github.com/neutrinojs/webpack-chain/tree/v4#getting-started
chainWebpack(config) {
config.devtool('source-map')
},
}
I have a simple project generated with vue-cli. When I run the vue-cli-service build command it produces CSS file correctly. When I run the vue-cli-service build --watch command it only builds JavaScript files. There are no CSS files.
How can I generate CSS files in watch mode?
You can achieve this by adding this line of code in your vue.config.js
//vue.config.js
module.exports = {
//adding extract css true solves this issue
css: {
extract: true
}
}
https://cli.vuejs.org/config/#css-extract
There is a good chance that you have to use an extract plugin for webpack.
I know that in my vue.config.js file I'm using :
chainWebpack: config => {
if (config.plugins.has('extract-css')) {
const extractCSSPlugin = config.plugin('extract-css');
extractCSSPlugin &&
extractCSSPlugin.tap(() => [
{
filename: 'build.css',
chunkFilename: 'build.css'
}
]);
}
}
Hopefully this help you. However vue inject your css in watch mode right at the top of your file for automatic re-rendering purpose I think.
How do we add PostCSS support to Vue cli 3 (I'm using beta 7)? Is there a plugin for it? Its not supported out of the box.
When I tried to import like this
import './index.pcss'
using the default cli generated project
./src/index.pcss
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sofa {
| font-family: "sofachrome", serif;
| }
# ./src/main.js 5:0-22
my postcssrc.js:
module.exports =
{
'plugins': {
'autoprefixer': {},
'postcss-smart-import': {},
'postcss-custom-properties': {},
'postcss-nested': {}
}
}
Just use the .css extension, not .pcss. If you must use .pcss you'll have to configure that in webpack. As for how to properly tap into that rule to do that I'd need to research a bit. Though, I think just using .css is a clear win.
PostCSS (as pointed out by Bill and Yuriy) works by default, but the Webpack loader is only configured for .css extensions. To modify it, update your vue.config.js:
module.exports = {
chainWebpack: config => {
config.module
.rule('pcss')
.use('postcss-loader')
.tap(options =>
merge(options, {
sourceMap: false,
})
)
}
}
Modify the example according to your needs.
Read more in vue-cli docs
Id like to read the contents of a text file which i have imported in my .vue file like import ToS from '~/static/terms-of-service.txt';
I want to access the contents as a String.
How can I do it?
VUE CLI 3
First install the raw loader
npm install raw-loader --save-dev
If you don't have a vue.config.js, make one at root and add
module.exports = {
chainWebpack: config => {
config.module
.rule('raw')
.test(/\.txt$/)
.use('raw-loader')
.loader('raw-loader')
.end()
}
}
To get the text file as string (if placed in src/assets/txt/):
import file from '#/assets/txt/file.txt'
N.B. Remember to rebuild
I'm using nuxt (created with vue cli 3), and this is what worked for me:
npm install --save-dev raw-loader
Update nuxt.config.js
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
config.module.rules.push({
enforce: 'pre',
test: /\.txt$/,
loader: 'raw-loader',
exclude: /(node_modules)/
});
}
}
I ended up using https://github.com/webpack-contrib/raw-loader
Seems that you need a loader to read files in vue