In the past, I wasn’t impressed enough with Vue.js Lint, because vue.js is a template file with the.vue suffix. That’s not easy to make, but it’s amazing how developed Lint tools are these days —

eslint

Lint: EsLint: EsLint: EsLint: EsLint: EsLint: EsLint: EsLint: EsLint: EsLint: EsLint: EsLint: EsLint: EsLint: EsLint: EsLint: EsLint: EsLint

For esLint styles, the main faction is still divided into “plus semicolon” and “without semicolon”. Personally, there are still two main styles: “Standard” and “Airbnb”. For me, I prefer standard without semicolon.

Note: the semicolon or not is just a joke, please click on the official website to compare or use it.

eslint Vue Plugin

The ESLint Vue Plugin is an ESLint Plugin for Vue that is maintained by the official Vue organization and corresponds to the Code Style recommended by the official Vue.

Use this plugin to do Lint hints in Vue files.

TypeScript eslint

For TypeScript projects, we used to use tsLint to handle the lint of the project, but now the typescript-esLint project is officially preferred. For Vue projects, the Vue CLI is currently initialized as this Lint plugin, and ESLint has a nice plan for TypeScript Lint

My configuration

I’m currently using a configured Version of Lint for the Vue project, mainly using the standard + Vue plugin mentioned above:

{
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "extends": ["plugin:vue/recommended", "standard"],
  "rules": {
    "semi": ["error", "always"],
    "space-before-function-paren": ["error", "never"],
    "vue/array-bracket-spacing": ["error", "always"],
    "vue/component-name-in-template-casing": ["error", "kebab-case"]
  }
}Copy the code

stylelint

In the past, I thought CSS didn’t have a lint specification, because there are so many things on the market. I hadn’t noticed that there was a project using it before. This time, I got to touch stylelint because of the specification code, and it turned out to be really nice. Support for major CSS preprocessors and postprocessors (sass/stylus/SCSS/less/PostCSS) as well as native CSS, you just need to import a plug-in and configure it.

For example, I use WebPack + PostCSS for this project (I love PostCSS by the way), so just import the WebPack plugin for StylelInt and configure customSyntax: ‘postCSs-html’, you can use Lint for PostCSS in Vue.

Also, like esLint, you can configure it from a file, so here’s my configuration for reference:

{
  "extends": "stylelint-config-recommended"
}Copy the code

In Vue, in addition to the above configuration, you need to specify

Finally, why do we use the Lint tool

In an unpleasant experience, I tried to promote some Code Review specifications, but because of the heavy historical baggage in the Code, people were not willing to implement them. A group Code Review reminded me that I could use Lint to regulate these behaviors. First, the change cost is small; second, Fix can help us repair the old Code as much as possible. We thought the old Code might need to be changed at a great cost before, but in fact, IT took me a day to fix the Code Style repair — and the benefits are actually significant:

The code is easier to maintain and the style is more uniform. In this way, the readability of the Code will also be improved. We can avoid guessing the thoughts of the colleagues who have left the Code. With the process of Code Review (including manual checking of variable names and comments), the maintainability of the Code will be improved to a high level as much as possible.

Of course, overall the standards are pretty strict, and when I first started, I was driven crazy by Airbnb’s standards, which were way too strict, and gave up on reality (which is one of the reasons I like standard).

Strict specification for the improvement of code quality is actually quite obvious, JavaScript, a language that can always run, does reduce the degree of rigor in some sense, as a programmer with ambition, I will be equipped with these necessary Lint tools in every project in the future, how about you?