Update on comments concerning lint-staged syntaxes
Different options for lint-staged syntax
I proposed the use of
"**/*.{js,vue}": ["npm run lint:js:fix"]
. Keep in mind that the choice of
lint:js:fix is subjective and can be customized to your preferences. It follows the naming convention used by Kent C Dodds, but you could opt for something like
lint:watermelon-potato-hehe if you prefer.
In terms of your suggestions:
"**/*.{vue,js,jsx,ts,tsx}": "npm run lint"
, this configuration covers a wider range of extensions, which is perfectly okay. While .tsx/.jsx may not be commonly used among Vue developers, incorporating .ts might require additional plugins in your ESlint setup. Personally, I recommend checking out tools like Vitesse for starting a Vue3 project with TypeScript support.
Regarding the second part, I generally prefer setting up my own ESlint configuration using eslint --ext .js,.vue --fix. This way, I have more control over the process and better visibility into any troubleshooting that might be required. While tools like vue-cli-service lint offer default configurations tailored for Vue projects, I lean towards creating a personalized Vue configuration alongside vanilla ESlint for a more tailored approach.
If speed is your priority, utilizing vue-cli-service lint for quick linting can be helpful. However, for a more precise configuration and smoother workflow, opting for vanilla ESlint provides greater flexibility and control, potentially reducing issues in the long run.
"**/*.{vue,js,jsx,ts,tsx}": "eslint --ext .vue,.js,.jsx,.ts,.tsx --fix"
. Although both sides contain similar scripts like lint:js:fix, the addition of extra extensions on the right side allows for further coverage.
You might wonder why we specify extensions on the left for lint-staged and on the right for lint:js:fix? The extensions on the right side are not strictly necessary (as far as I know) since lint-staged only executes commands for the specified extensions on the left. However, being explicit about targeted extensions enhances clarity and enables running npm run lint:js:fix in the CLI without triggering errors on unhandled files such as .txt, .json, .md, or .jpg.
Experimentation is key here—if unsure, consider testing different setups to find the most efficient solution for your needs.
"**/*.{vue,js,jsx,ts,tsx}": "eslint --fix"
. This configuration may function effectively based on previous explanations, although I haven't personally tested it.
Exploring other file extensions
For .html files, they should be minimal within your Vue project. Utilize W3C validator to ensure compliance if necessary. In terms of HTML within template tags in your .vue files, these sections will undergo proper ESlint checks. Incorporating Prettier complements this setup, offering convenient auto-formatting capabilities once a team-wide .prettierrc configuration is established.
As for .json files, ESlint doesn't handle them natively. To lint/format .json or other specific extensions, explore relevant NPM packages that suit your requirements and integrate them into your pipeline using configurations like
"**/*.json": ["npm run lint-my-json-please"]
.
Ultimately, husky and lint-staged streamline tasks that could manually be performed via the CLI. If you're satisfied with manual execution and results, transitioning to automation requires identifying suitable packages and configuring them accordingly.
In your package.json, consider including the following:
"scripts": {
"lint:js": "eslint . --ext .js,.vue",
"lint:js:fix": "eslint --ext .js,.vue --fix",
},
In your .lintstagedrc:
{
"**/*.{js,vue}": ["npm run lint:js:fix"]
}
In .husky/pre-commit:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint-staged
In .husky/commit-msg:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit ""
Consider setting up ESlint error tracking in VSCode for real-time monitoring and automatic formatting upon saving files.
Now, either manually run npm run lint:js for issue detection, or let husky execute lint-staged and apply eslint --fix exclusively to modified .js and .vue files during commits.
Your commitlint.config.js configuration should suffice!
To recap, lint:js examines all JS and Vue files, whereas during commits triggered by husky and lint:js:fix, only touched files undergo linting—this exemplifies the essence of selective linting facilitated by lint-staged.