I'm using a Vue template project that uses ESLint. I'd like to turn it off, so I followed these instructions and made a file with
**/*.js
called .eslintignore inside of my project root. However, I'm still getting the same eslint error messages. What am I doing wrong?
If you're using the vscode-eslint plugin, the .eslintignore file may need to be placed at the root of the workspace folder, in order to be recognized by the vscode plugin.
For my configuration - I needed to add the "ignorePatterns" property in .eslintrc:
"ignorePatterns": "**/*.d.ts"
You should use **/* instead of **/*.js as the first will ignore both .js and .vue files.
Alternatively you can comment this whole block in your build/webpack.base.conf.js
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
}
I love ESLint but sometimes you want it to completely ignore a whole file. Add this to the top of your file:
/* eslint-disable */
It needs to be in /* this kind */ of comment, not // this kind.
And ESLint won't complain about your file any more!
Related
I'm using Webpack to build my front end components.
I have some React components which need classic webpack bundling, though I also have some vanilla JS files.
Those latter files are independent, so they won't get imported from React files. From my understanding, they need to be defined as entrypoints, so that Webpack reads and processes them. So far, so good.
The trouble is that I'd like Webpack to load them with Babel, and that's all, only give me back the JS file processed through Babel, I'm not interested in a bundle for these files.
Is it possible to do that? Only get the result of the babel loader, and not produce a bundle for some entrypoints?
Maybe I shouldn't use Webpack at all for these files?
Or maybe I should just set these bundles as 'library' so that I can reach them from the HTML pages?
What do you think guys?
Thanks by advance ;)
depends on how easy it is to find these files. I have a project that has similar requirement. What I have done is:
1/ put the vanilla js file in third_party/lib/
2/ import/require them in my current project
3/ set up my webpack.config.js as follows:
module.export = {
module: {
rules: [{
test : /.js$/,
exclude : /node_modules|third_party/,
loaders : ['babel-loader' /* other loaders? */],
},{
test : /third_party.*?\.js$/,
use: [{
loader : 'babel-loader' // or other loaders
},{
loader: 'file-loader'
options: {
name : '[path][name].[ext]',
outputPath : 'dist/third_party'
}
}]
}]
}
}
oh, you will need to npm i --save-dev file-loader
edit: I should clarify that this will bundle the vanilla js file as separate files to your main bundle, so you will have to import them by script tags yourself in your html file. (or if they were worker files, called by your script)
I have started a project with Vue js in combination with Buefy. Buefy (Bulma) is developed in SASS and i work with LESS. I want to override some values from Buefy but my project is setup with LESS. My question is:
Can i work with both preprocessors?
In my components i use:
<style lang="less"></style>
but i also want to be able to use:
<style lang="sass"></style>
Can this be done?
Many thanks in advance!
"Sure, you can"
However, I discourage you to do so, because you're going to preprocess the styles twice, with different preprocessors (scopes, class naming, unexpected weird errors), you'll have to debug your code to see if it's working right.
Moving forward: depending on your Vue setup, the configuration you need for the webpack(in case you use it, but gulp, grunt, etc... work too ) you have.
In case of webpack just add the configuration for Sass in your {projectRoot}/webpack.config.js, inside module rules array under .vue rule:
{
test: /\.vue$/,
loader: 'vue'
},
// CODE GOES HERE =====>
{
test: /\.s[a|c]ss$/,
loader: 'style!css!sass'
}
And in your vue option in the same file (create if you don't have one, should be under module option):
vue: {
loaders: {
scss: 'style!css!sass'
}
}
You have to install node-sass and css-loader and sass-loader and style-loader...
$ npm install --save-dev node-sass css-loader sass-loader style-loader
I have a project with React and Webpack as build system. My devDependencies
devDependencies
"webpack": "^4.5.0",
webpack.config.js
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
...
And I get this error:
ERROR in ./node_modules/project/components/InfiniteScroller.jsx
Module parse failed: Unexpected token (9:8) You may need an
appropriate loader to handle this file type.
What I am doing wrong?
It looks like you're including uncompiled code from node_modules, your loader specifically excludes compiling node_modules code (exclude: /node_modules/) for efficiency reasons. Usually modules expose a compiled version of the library (usually in /dist, usually pointed to by "main" property in the package.json of the module).
If you want to parse code in node_modules, I recommend you just do it for node_modules/project, rather than all modules for efficiency. Modify your exclude statement accordingly, something like: exclude: /node_modules(?!\/project)/
You'll also need to make sure you use the necessary presets to handle the files (e.g. babel-preset-env, babel-preset-react) and any plugins the file might need (e.g. transform-object-rest-spread etc).
Since I don't have enough points to comment, I'll post as an answer -
I see you're importing a .jsx module - You should try adding
query: {
presets: ['es2015','react']
}
to your rule after use
Webpack claims to manage module dependencies including image files. I understand that the following webpack config allows me to require jpg files from JS/CSS:
module.exports = {
module: {
rules: [
{
test: /\.jpg$/,
use: [ 'file-loader' ]
}
]
}
}
using url(/image.png) or require('./image.png'), but how would I include an image from an HTML file?
<img src="/image.png">
I know I can use copy-webpack-plugin to copy over static files into the output directory, but I'm wondering if there is a way to require images directly from HTML.
'html-loader' will do this for you by default, however if you are reading this behavior from your main index.html page, you will need to make webpack treat it as module also. Luckily html-webpack-plugin can do this for you in conjunction with html-loader: html-webpack-plugin.
This might be a basic question but I'm really new to react and webpack.
How do I go about adding normalize.css and css frameworks?
I don't want to use bootstrap, instead I found a lightweight css framework called concise css. I'd like to use this since i'm mainly after the positioning and formatting of my elements and have more flexibility with my styles.
I've already installed css-loader and styles-loader.
I've read you can load styles to components by using
require("./path/to/css")
However, i'm still really confused by this.
You can put your require("./path/to/css") inside of your index.js or any other top-level React component. It will get bundled in your web pack for all child components from there.
Make sure you have your loaders installed in your package.json file and youur webpack.config.js file calls the loaders. A barebones webpack.config.js file that accomplishes this might look like:
module.exports = {
entry: [
'./app/index.js'
],
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}
Upon further reading, I realized normalize.css is very static and webpack works with more dynamic files.
So instead, I just got the cdn for normalize.css and use semantic-ui-react