Skip to content

Instantly share code, notes, and snippets.

@jh-thank-you
Created July 5, 2017 03:15
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jh-thank-you/a899968373c42bd113f79b7a91e14663 to your computer and use it in GitHub Desktop.
Save jh-thank-you/a899968373c42bd113f79b7a91e14663 to your computer and use it in GitHub Desktop.
ESlinting ISSUE SOLVED - with webpack 3.x eslint-plugin-vue v3.x, eslint-friendly-formatter v3.x and eslint-html-plugin v3.x,
**To help out others… I spent more hours on this than I care to count… for those trying to setup auto ESlinting with webpack 3.x eslint-plugin-vue v3.x, eslint-friendly-formatter v3.x and eslint-html-plugin v3.x, read on (note I’m using Sublime Text 3):**
If I comment out `.vue` from `eslint-plugin-html` settings everything seems to work:
**to help others, in the .eslintrc.js:**
```
module.exports = {
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
},
plugins: [
'html',
],
settings: {
// if you have .vue active for eslint-html-plugin settings
// linting will not progress through all subdirectories
// it conflicts with eslint-plugin-vue (latest v3.5.0)
// it will stop at the main entry point.
"html/html-extensions": [".html", /* ".vue" */], // consider .html files as XML
"html/report-bad-indent": "error",
},
extends: [
'eslint:recommended',
'plugin:vue/recommended' // or 'plugin:vue/base'
],
parserOptions: {
sourceType: 'module',
},
rules: {
'comma-dangle': ['error', 'always-multiline'],
indent: ['error', 2],
'linebreak-style': ['error', 'unix'],
quotes: ['error', 'single'],
semi: ['error', 'always'],
'no-unused-vars': ['warn'],
'no-console': 0,
'vue/order-in-components': [2, {
order: [
['name', 'delimiters', 'functional', 'model'],
['components', 'directives', 'filters'],
['parent', 'mixins', 'extends', 'provide', 'inject'],
'el',
'template',
'props',
'propsData',
'data',
'computed',
'watch',
'lifecycle_hooks',
'methods',
'render',
'renderError'
]
}] // END order
},
};
```
**in the ignore file:**
```
# ESlint #
##########
/tmp/**
test.js
webpack.config.js
/webpack.config.js
**/webpack.config.js
in the webpack config:
```
**in the webpack config**
```
// within rules
{
enforce: 'pre', // with this eslint will not process files done by babel-loader
test: /\.(vue|js)$/, // /\.js$/,
loader: 'eslint-loader',
exclude: /node_modules/,
options: {
emitWarning: true,
// community formatter
formatter: require('eslint-friendly-formatter'),
// cache: DEVELOPMENT,
fix: true, // Set to true for eslint autofixing
// quite: true, // Process report errors only and ignore warnings
},
}, {
test: /\.vue$/,
loader: 'vue-loader', // Used for Vue Templates. Also Hot Module Replacement only works with .vue files
options: {
loaders: {
}
// other vue-loader options go here
}
},
````
@mubaidr
Copy link

mubaidr commented Jul 5, 2017

Interesting, plug-in is in beta state but worth a try.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment