Before using our settings be sure to follow our instruction.
Atom packages
- linter-eslint
- prettier-atom
- language-vue
linter-eslint settings
- Fix errors on save:
enabled|disabled(optional) - List of scopes to run ESLint on, run 'Editor: Log': add value
text.html.vue(required) - Show Rule ID in Messages:
enabled(required) - Use global ESLint installation:
Disabled(required)
prettier-atom settings
- ESLint Integration:
enabled(required) - Format Files on Save:
enabled|disabled(optional)
VSCode packages
- Prettier - Code formatter
- ESlint
- Vetur
To use Vue for ESlint you have to ue the Vue settings
"eslint.validate": [ "javascript", "javascriptreact", "vue" ]
VSCode has some issues following the autosave of prettier and the ESLint config. If you know how to fix this problem please create a PR.
To use the config you have to install the following NPM packages:
"eslint": "^5.6.0",
"eslint-config-prettier": "^3.1.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-prettier": "^2.7.0",
"eslint-plugin-vue": "^4.7.1"
I'll list some options that are opinionated. All other options are an combination of the Vue standard and ESlint standard. Our parser is Babal-eslint
Results in an error. No duplicate use of keys can be used.
Results in an warning. No duplicate use of attributes in Vue. If you want to use multiple attributes you can use the bind option of Vue.
Results in an error. These keys are reserved by Vue. Overriding these settings results in an error.
Results in an error. You can't manipulate computed properties.
Results in an error. You can't use the key attribute on a template.
Results in an warning. For singleline components you can't use a linebreak to close the element. For multiline components you have to use a linebreak to close the element.
Results in an warning.
- startTag:
never - endTag:
never - selfClosingTag:
always
Results in an warning.
- void:
always - normal:
always - component:
always
Results in an warning. We use a maxiumum of 3 attributes for an element. Multiline has a max of 1.
Results in an warning. We use a space for adding a Vue elements into the DOM.
Results in an error. Don't use this in the template
These settings are opinionated, please read them carefully, even the .eslintrc.js. If you find something please create a PR or an issue on this repo.