How to implement vue3+ts+EsLint+Prettier Specification Code

This article focuses on "how to implement the vue3+ts+EsLint+Prettier specification code", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to implement the vue3+ts+EsLint+Prettier specification code.

Use

The use of EsLint

Installation dependency

Npm I-D eslint eslint-plugin-vue @ typescript-eslint/parser @ typescript-eslint/eslint-plugin

The four dependencies are:

-`eslint`: the core code of EsLint

-``eslint-plugin- vue`: [plug-ins that use Eslint for Vue] (https://eslint.vuejs.org/)

-`@ typescript-eslint/ parser`: parser for ESLint, which is used to parse typescript to check and standardize Typescript code

-`@ typescript-eslint/eslint- plugin`: this is an ESLint plug-in that contains various defined specifications for detecting Typescript code

Add Profil

Npx eslint-init

Add the .eslintrc.js file to the root directory. (it is recommended to select js file, json cannot write comments) modify the configuration file

It is mainly to modify the relevant configuration in rules. For more information, please see the official configuration.

/ *! * https://eslint.bootcss.com/docs/rules/ * https://eslint.vuejs.org/rules/ * *-0: off *-1: warn *-2: error * / module.exports = {root: true, env: {browser: true, node: true, es6: true}, parser: 'vue-eslint-parser', parserOptions: {parser:' @ typescript-eslint/parser', ecmaVersion: 2020 SourceType: 'module', jsxPragma:' React', ecmaFeatures: {jsx: true}}, globals: {AMap: false, AMapUI: false}, extends: ['plugin:vue/vue3-recommended',' plugin:@typescript-eslint/recommended', 'prettier',' plugin:prettier/recommended'], rules: {'@ typescript-eslint/ban-ts-ignore': 'off' '@ typescript-eslint/explicit-function-return-type':' off','@ typescript-eslint/no-explicit-any': 'off',' @ typescript-eslint/no-var-requires': 'off',' @ typescript-eslint/no-empty-function': 'off',' vue/custom-event-name-casing': 'off',' no-use-before-define': 'off' '@ typescript-eslint/no-use-before-define':' off','@ typescript-eslint/ban-ts-comment': 'off',' @ typescript-eslint/ban-types': 'off',' @ typescript-eslint/no-non-null-assertion': 'off',' @ typescript-eslint/explicit-module-boundary-types': 'off',' @ typescript-eslint/no-unused-vars': ['error' {argsIgnorePattern:'^ _', varsIgnorePattern:'^ _'}], 'no-unused-vars': [' error', {argsIgnorePattern:'^ _', varsIgnorePattern:'^ _'}], 'space-before-function-paren':' off', 'vue/name-property-casing': [' error', 'PascalCase'] / / vue/component-definition-name-casing forces the use of a specific size of 'vue/attributes-order':' off', 'vue/one-component-per-file':' off', 'vue/html-closing-bracket-newline':' off', 'vue/max-attributes-per-line':' off', 'vue/multiline-html-element-content-newline':' off' for component definition names 'vue/singleline-html-element-content-newline': 'off',' vue/attribute-hyphenation': 'off',' vue/require-default-prop': 'off',' vue/script-setup-uses-vars': 'off',' vue/html-self-closing': ['error', {html: {void:' always', normal: 'never' The use of component: 'always'}, svg:' always', math: 'always'}]} Prettier

Installation dependency

Npm I-- save-dev prettier eslint-config-prettier eslint-plugin-prettier

The three dependencies are:

-`prettier`: the core code of the prettier plug-in

-`eslint-config- prettier`: resolve the conflict between the style specification in ESLint and the style specification in prettier, and make the style specification in ESLint invalid automatically according to the style specification in prettier.

-`prettier`: use prettier as an ESLint specification

Add Profil

Create the file `.prettierrc.js` in the root directory of the project and add the following configuration

Module.exports = {printWidth: 120, / / newline string threshold tabWidth: 2, / / set the number of spaces for each horizontal indentation of the tool useTabs: false, semi: false, / / whether to add semicolons vueIndentScriptAndStyle: true, singleQuote: true, / / use single quotes trailingComma: 'none', / / the last object element with a comma bracketSpacing: true, / / object Array with spaces jsxBracketSameLine: true, / / jsx > whether to start another line arrowParens: 'always', / / (x) = > {} whether to have parentheses requirePragma: false, / / do not need to write @ prettier insertPragma: false / / at the beginning of the file do not need to automatically insert @ prettier} at the beginning of the file

Add Prettier to EsLint

Modify the file `.eslintrc.js` to add to extends

'prettier', 'plugin:prettier/recommended'

Where:

-`prettier/@typescript- eslint`: invalidate the style specification in @ typescript-eslint and follow the style specification in prettier

-`style specification in prettier is used, and if ESLint detects prettier format problems, the format problems are also thrown in the form of error.

Build code using husky and lint-staged

Installation dependency

Npm I-- save-dev husky lint-staged

Modify package.json

Add the following code

"husky": {"hooks": {"pre-commit": "lint-staged"}}, "lint-staged": {"src*/**/*.ts": ["prettier-- config .prettierrc.js-- write", "eslint", "git add"] "src*/**/*.json": ["prettier-- config .prettierrc.js-- write", "eslint", "git add"]}

In this way, when the git commit is executed, the EsLint checks the submitted code.

Add setting.json configuration

Add the `setting.json` configuration file to the .vscode folder to automatically repair and verify the code when it is automatically saved.

{"typescript.tsdk": ". / node_modules/typescript/lib", "typescript.enablePromptUseWorkspaceTsdk": true, "volar.tsPlugin": true, "volar.tsPluginStatus": false, / / = / / = Editor = = / / = = "explorer.openEditors.visible": 0, "editor.tabSize": 2, "editor.defaultFormatter": "esbenp.prettier-vscode", "diffEditor.ignoreTrimWhitespace": false, / / = = / / = Other = = / / = = "breadcrumbs.enabled": true "open-in-browser.default": "chrome", / / = = / / = files = / / = = "files.eol": "\ n", "search.exclude": {"* * / node_modules": true, "* * / * .log": true, "* * / * .log *": true, "* * / bower_components": true, "* * / dist": true, "* * / elehukouben": true "* * / .git": true, "* * / .gitignore": true, "* * / .svn": true, "* * / .DS_Store": true, "* * / .idea": true, "* * / .vscode": false, "* * / yarn.lock": true, "* * / tmp": true, "out": true, "dist": true, "node_modules": true: "CHANGELOG.md": true, "examples": true, "res": true, "screenshots": true, "yarn-error.log": true, "* * / .yarn": true}, "files.exclude": {"* * / .cache": true, "* * / .editorconfig": true, "* * / .eslintcache": true, "* * / bower_components": true, "* * / .idea": true "* * / tmp": true, "* * / .git": true, "* * / .svn": true, "* * / .hg": true, "* * / CVS": true, "* * / .DS_Store": true}, "files.watcherExclude": {"* * / .git / objects/**": true, "* * / .git/subtree-cache/**": true "* * / .vscode / *": true, "* * / node_modules/**": true, "* * / tmp/**": true, "* * / bower_components/**": true, "* * / dist/**": true, "* * / yarn.lock": true}, "stylelint.enable": true, "stylelint.packageManager": "yarn", "liveServer.settings.donotShowInfoMsg": true, "telemetry.enableCrashReporter": false "workbench.settings.enableNaturalLanguageSearch": false, "path-intellisense.mappings": {"/ @ /": "${workspaceRoot} / src"}, "prettier.requireConfig": true, "typescript.updateImportsOnFileMove.enabled": "always", "workbench.sideBar.location": "left", "[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"} "[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}, "[typescriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}, "[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}, "[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"} "[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}, "[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}, "[markdown]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}, "editor.codeActionsOnSave": {"source.fixAll.eslint": true} "[vue]": {"editor.codeActionsOnSave": {"source.fixAll.eslint": false}}, "cSpell.words": ["vben", "windi", "browserslist", "tailwindcss", "esnext", "antv", "tinymce", "qrcode", "sider", "pinia", "sider", "nprogress"]} so far I believe you have a deeper understanding of "how to implement the vue3+ts+EsLint+Prettier specification code". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!