NOTE: I missed, prior to developing and publishing this package, that Vue had released an ESLint plugin that does the same thing. The Style Guide still has no link to the plugin; see this issue. While it was a learning opportunity, I don't think there's any reason to continue working on this project.
A cli style-linter for Vue using the rules and recommendations in the Vue Style Guide. Right now it only checks the order of a component's options as outlined in Priority C Rules: Recommended - Component/instance options order. Each file must be a single-file component and the element order must be <template> - <script> - <style>. If a component has no template of its own, <script> - <style> will also work.
You can install globally:
npm i -g vue-style-lintor locally:
npm i -D vue-style-lintIf you install globally, the vsl command is ready to go. It takes one argument: a single-file component (.vue file) or a folder of them:
vsl your file/folder, relative to where you are entering the command
If you install locally, you will need something like globally-installed npx to run the vsl command:
npx vsl your file/folder, relative to where you are entering the command
Alternatively, you can run the vsl command from your package.json scripts object:
"scripts": {
"lint:style": "vsl your file/folder, relative to your project's root"
}
You would then run:
npm run lint:style
One of the following messages logged to the console:
- the component's options are already in order
- the recommended order
- an error message
MIT © james south