vscode + vite + vue3 + ts + eslint + stylelint 代码自动格式化 |
您所在的位置：网站首页 › 在线打印插件怎么安装 › vscode + vite + vue3 + ts + eslint + stylelint 代码自动格式化 |
vscode + vite + vue3 + ts + eslint + stylelint 代码自动格式化
|
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。 使用 vite 创建的 vue3 项目有点简陋，很多功能都没有。所以本文将讲解一下如何对 vite + vue3 项目配置代码自动格式化。配置完成后的效果如下图所示： 打开 VSCode，安装以下插件： eslint stylelint volar 复制代码打开 VSCode 配置文件（Mac command + shift + p，windows ctrl + shift + p，输入 settings）。 在配置文件中加入以下代码： "editor.codeActionsOnSave": { "source.fixAll": true, }, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "eslint.alwaysShowStatus": true, "stylelint.validate": [ "css", "less", "postcss", "scss", "vue", "sass" ], 复制代码 安装项目依赖安装以下依赖: npm i -D eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-typescript eslint-plugin-vue husky sass stylelint stylelint-config-standard stylelint-scss typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser vue-eslint-parser 复制代码注意，有些依赖版本对不上的时候，会造成格式化失败。例如 eslint 插件使用 8.0 版本以上格式化就报错，后来使用的是 7.0 的版本。安装后的具体版本如下： "@typescript-eslint/eslint-plugin": "^5.1.0", "@typescript-eslint/parser": "^5.1.0", "eslint": "^7.2.0", "eslint-config-airbnb-base": "^14.2.1", "eslint-plugin-import": "^2.25.2", "eslint-plugin-typescript": "^0.14.0", "eslint-plugin-vue": "^7.20.0", "husky": "^4.2.3", "sass": "^1.43.3", "stylelint": "^13.13.1", "stylelint-config-standard": "^22.0.0", "stylelint-scss": "^3.21.0", "typescript": "^4.4.3", "vue-eslint-parser": "^7.11.0", 复制代码建议大家直接复制上面的代码到 package.json 文件中再下载。 配置 .eslintrc.js .stylelintrc.js 文件我的 eslint 配置是基于 airbnb 规范的， css 规范用的是官方插件。 .eslintrc.js 文件 module.exports = { root: true, globals: { defineEmits: 'readonly', defineProps: 'readonly', }, extends: [ 'plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended', 'airbnb-base', ], parser: 'vue-eslint-parser', plugins: [ '@typescript-eslint', ], parserOptions: { parser: '@typescript-eslint/parser', ecmaVersion: 2020, }, rules: { 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-bitwise': 'off', 'no-tabs': 'off', 'array-element-newline': ['error', 'consistent'], indent: ['error', 4, { MemberExpression: 0, SwitchCase: 1, ignoredNodes: ['TemplateLiteral'] }], quotes: ['error', 'single'], 'comma-dangle': ['error', 'always-multiline'], 'object-curly-spacing': ['error', 'always'], 'max-len': ['error', 120], 'no-new': 'off', 'linebreak-style': 'off', 'import/extensions': 'off', 'eol-last': 'off', 'no-shadow': 'off', 'no-unused-vars': 'warn', 'import/no-cycle': 'off', 'arrow-parens': 'off', semi: ['error', 'never'], eqeqeq: 'off', 'no-param-reassign': 'off', 'import/prefer-default-export': 'off', 'no-use-before-define': 'off', 'no-continue': 'off', 'prefer-destructuring': 'off', 'no-plusplus': 'off', 'prefer-const': 'off', 'global-require': 'off', 'no-prototype-builtins': 'off', 'consistent-return': 'off', 'vue/require-component-is': 'off', 'prefer-template': 'off', 'one-var-declaration-per-line': 'off', 'one-var': 'off', 'import/named': 'off', 'object-curly-newline': 'off', 'default-case': 'off', 'import/order': 'off', 'no-trailing-spaces': 'off', 'func-names': 'off', radix: 'off', 'no-unused-expressions': 'off', 'no-underscore-dangle': 'off', 'no-nested-ternary': 'off', 'no-restricted-syntax': 'off', 'no-mixed-operators': 'off', 'no-await-in-loop': 'off', 'import/no-extraneous-dependencies': 'off', 'import/no-unresolved': 'off', 'no-case-declarations': 'off', 'template-curly-spacing': 'off', 'vue/valid-v-for': 'off', '@typescript-eslint/no-var-requires': 'off', '@typescript-eslint/no-empty-function': 'off', 'no-empty': 'off', '@typescript-eslint/no-explicit-any': 'off', 'guard-for-in': 'off', '@typescript-eslint/ban-types': 'off', 'class-methods-use-this': 'off', 'no-return-await': 'off', 'vue/html-indent': ['error', 4], 'vue/html-self-closing': 'off', 'vue/max-attributes-per-line': ['warn', { singleline: { max: 3, allowFirstLine: true, }, multiline: { max: 1, allowFirstLine: false, }, }], 'vue/singleline-html-element-content-newline': 'off', }, } 复制代码 .stylelintrc.js 文件 module.exports = { extends: 'stylelint-config-standard', rules: { 'indentation': 4, 'selector-pseudo-element-no-unknown': [ true, { ignorePseudoElements: ['v-deep'] } ], 'number-leading-zero': 'never', 'no-descending-specificity': null, 'font-family-no-missing-generic-family-keyword': null, 'selector-type-no-unknown': null, 'at-rule-no-unknown': null, 'no-duplicate-selectors': null, 'no-empty-source':null, 'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global'] }] } } 复制代码 踩坑 Unknown word (CssSyntaxError) 错误这个问题主要是因为 stylelint 升级到 14 大版本造成的。 解决方案一安装 stylelint 新的相关依赖： npm i -D stylelint-config-recommended-vue stylelint-config-standard-scss postcss-html postcss-scss 复制代码然后修改 .stylelintrc.js 文件的配置项： extends: [ 'stylelint-config-standard-scss', 'stylelint-config-recommended-vue' ], customSyntax: 'postcss-html', overrides: [ { files: ['**/*.{scss,css,sass}'], // css 相关文件由 postcss-scss 处理 customSyntax: 'postcss-scss' }, ], 复制代码这样修改以后，就不会再报错了。 如果出现 Cannot find module 'postcss-scss' 错误，请将 node_modules package-lock.json 文件删了重新安装。 解决方案二第二个解决方案就是将以上三个插件的版本降一个大版本就好了，最后的版本如下： "stylelint": "^13.13.1", "stylelint-config-standard": "^22.0.0", "stylelint-scss": "^3.21.0", 复制代码同时需要将 VSCode 的 stylelint 插件降级，现在插件的最新版本是 1.0.3，不支持 stylelint 13 版本。点击插件旁边的小齿轮，再点 Install Another Version，选择其他版本进行安装。 选 0.87.6 版本安装就可以了，这时 css 自动格式化功能恢复正常。 忽略 .vue 文件中的 HTML 模板验证规则无效举个例子，如果你将 HTML 模板每行的代码文本长度设为 100，当超过这个长度后 eslint 将会报错。此时如果你还是想超过这个长度，可以选择忽略这个规则： /* eslint-disable max-len */ 复制代码注意，以上这行忽略验证的代码是不会生效的，因为这个注释是 JavaScript 注释，我们需要将注释改为 HTML 格式，这样忽略验证才会生效： 复制代码 selector-anb-no-unmatchable 错误这是因为 stylelint 新增的规则引起的错误，但是这个规则又消除不了。所以需要把 stylelint-scss 锁死为 4.3.0 版本，重新安装此依赖后。再把 stylelint-config-recommended-vue 重新安装一遍，即可解决这个问题。 总结这样配置完成之后，基本上 vue3 项目里的代码都能格式化了（css js html 及各种衍生代码）。没有使用 prettier 是因为不够自由，而且它的功能已经可以由 eslint stylelint 来代替了。 为了不让大家再次踩坑，我已经将配置好的项目 demo 上传到 github 了，有需要直接克隆项目就行。 项目地址： github.com/woai3c/vite… 欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章 |
【本文地址】
今日新闻 |
推荐新闻 |