vscode编辑器，vue、小程序等语言适配eslint格式校验 + prettier 保存时自动修改格式

news/2024/12/5 4:58:59/

目的：自留备份，用者自取

基础配置

1 基于vscode编辑器，prettier插件需要下载
2 eslint配置项规则：
https://eslint.bootcss.com/docs/rules/
3 prettier配置项规则：
https://prettier.io/docs/en/options.html

安装插件

"devDependencies": {"eslint": "^7.32.0","eslint-plugin-prettier": "^4.2.1"}

配置文件问题：
如果项目中带有.vscode文件夹，这里面的setting.json会覆盖全局的setting.json，这样对vscode编辑器做的配置，会被覆盖掉。同样，如果不想修改vscode的全局配置，也可以在这里做个性化的配置。

.vscode -> settings.json 配置项

{// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// 每次保存的时候自动格式化"editor.formatOnSave": true,"javascript.format.enable": true,// 让函数(名)和后面的括号之间取消空格"javascript.format.insertSpaceBeforeFunctionParenthesis": false,"explorer.confirmDelete": false,// 启用保存时自动修复eslint,默认只支持.js文件"editor.codeActionsOnSave": {"source.fixAll.eslint": true},// 保存时格式自动对齐"editor.defaultFormatter": "esbenp.prettier-vscode",// 用eslint的规则检测js文件"eslint.validate": ["javascript"]
}

prettierrc.js配置项

module.exports = {// prettier的配置printWidth: 80, // 每行最多多少个字符换行tabWidth: 2, // tab缩进大小,默认为2useTabs: false, // 使用tab缩进，默认falsesemi: false, // 使用分号, 默认truesingleQuote: true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号jsxSingleQuote: false, // 单引号trailingComma: 'all', // 行尾逗号bracketSpacing: true, // 花括号内填充空格 { a: 23 }bracketSameLine: false, // 最后的尾尖括号（>）放在同一行还是换行arrowParens: 'avoid', // 箭头函数一个参数是否使用括号包裹参数eslintIntegration: true, // #让prettier使用eslint的代码格式进行校验
}

eslintrc.js配置项

这部分可变化的空间很大，可繁可简，微信小程序开发的时候还可以加配wxml格式校验，常规vue、wx小程序、egg.js、nuxt.js语法各有不同，在配置的时候，灵活变通

vue管理后台（框架带的，配置比较详细，很多内容规定很严格）
module.exports = {root: true,env: {node: true,},extends: ['vue-global-api','plugin:vue/vue3-recommended','eslint:recommended','plugin:@typescript-eslint/recommended','@vue/typescript/recommended','plugin:prettier/recommended',],parser: 'vue-eslint-parser',parserOptions: {parser: {js: 'espree',ts: '@typescript-eslint/parser','<template>': 'espree',},sourceType: 'module',ecmaFeatures: {jsx: true,tsx: true,},warnOnUnsupportedTypeScriptVersion: false,},rules: {'no-undef': 'off','no-console': 'off','no-debugger': 'off','prettier/prettier': 'warn','prefer-template': 'error','vue/no-reserved-component-names': 'off','@typescript-eslint/no-this-alias': 'off','@typescript-eslint/no-explicit-any': 'off','@typescript-eslint/no-var-requires': 'off','@typescript-eslint/no-empty-function': 'off','@typescript-eslint/ban-ts-comment': 'off','vue/no-v-html': 'off','vue/html-self-closing': ['error',{html: {void: 'any',normal: 'any',component: 'always',},svg: 'always',math: 'always',},],// 多字组件名称'vue/multi-word-component-names': 'off',// Vue.js风格指南(https://cn.vuejs.org/v2/style-guide/)// Vue组件排序'vue/order-in-components': ['warn',{order: ['el','name','key','parent','functional',['delimiters', 'comments'],['components', 'directives', 'filters'],'extends','mixins',['provide', 'inject'],'ROUTER_GUARDS','layout','middleware','validate','scrollToTop','transition','loading','inheritAttrs','model',['props', 'propsData'],'emits','setup','fetch','asyncData','data','head','computed','watch','watchQuery','LIFECYCLE_HOOKS','methods',['template', 'render'],'renderError',],},],// Vue属性排序'vue/attributes-order': ['warn',{order: ['DEFINITION','LIST_RENDERING','CONDITIONALS','RENDER_MODIFIERS','GLOBAL','UNIQUE','TWO_WAY_BINDING','OTHER_DIRECTIVES','OTHER_ATTR','EVENTS','CONTENT',],alphabetical: true, //字母顺序},],},overrides: [{files: ['**/__tests__/*.{j,t}s?(x)','**/tests/unit/**/*.spec.{j,t}s?(x)',],env: {jest: true,},},{files: ['**/__tests__/*.{j,t}s?(x)','**/tests/unit/**/*.spec.{j,t}s?(x)',],env: {jest: true,},},],
}
微信小程序（自配，同时夹杂对wxml的校验）
module.exports = {root: true,// 标记当前代码最终的运行环境env: {es2021: true,node: true,},// 设置多个共享配置extends: 'eslint:recommended',parserOptions: {ecmaVersion: 2021,sourceType: 'module',},overrides: [{files: ['*.js'],rules: {'no-unused-vars': 'error','no-console': 'off','generator-star-spacing': 'off', // 强制 generator 函数中 * 号周围使用一致的空格// 'no-mixed-operators': 'error', // 禁止混合使用不同的操作符，用括号区分开来quotes: [// 改双引号为单引号'error','single',{avoidEscape: true, // 允许字符串使用单引号或双引号，只要字符串中包含了一个其它引号，否则需要转义allowTemplateLiterals: true, // 允许字符串使用反勾号},],semi: [// 去结尾分号2,'never',{beforeStatementContinuationChars: 'never',},],'no-delete-var': [2],'object-curly-spacing': ['error', 'always'], // 强制在花括号中使用一致的空格'array-bracket-spacing': ['error', 'never'], // 禁止或强制在括号内使用空格'array-bracket-newline': ['error', { multiline: true }], // 强制数组元素间出现换行 (array-element-newline)'eol-last': ['error', 'always'], // 要求或禁止文件末尾保留一行空行 (eol-last)'func-call-spacing': ['error', 'never'], // 要求或禁止在函数标识符和其调用之间有空格'space-before-function-paren': ['error',{anonymous: 'always',named: 'never',asyncArrow: 'always',},], // 要求或禁止函数圆括号之前有一个空格indent: ['error', 2], // 强制在对象字面量的键和值之间使用一致的空格'key-spacing': ['error', { beforeColon: false }],'keyword-spacing': ['error', { before: true }], // 强制关键字周围空格的一致性// 'linebreak-style': ['error', 'windows'], // 强制使用一致的换行符风格'no-trailing-spaces': 'error', // 禁用行尾空白'no-whitespace-before-property': 'error', // 禁止属性前有空白'semi-spacing': 'error', // 强制分号前后有空格'space-before-blocks': 'error', // 要求或禁止语句块之前的空格'space-in-parens': ['error', 'never'], // 禁止或强制圆括号内的空格'space-infix-ops': 'error', // 要求中缀操作符周围有空格'switch-colon-spacing': 'error', // 强制在 switch 的冒号左右有空格,'comma-spacing': ['error', { before: false, after: true }],'dot-notation': ['error'], // 强制尽可能地使用点号// 'eqeqeq': ['error', 'always'], // 要求使用 === 和 !=='no-dupe-keys': 'error', // 禁止对象字面量中出现重复的 key'arrow-spacing': 'error', // es6箭头函数空格},},{files: ['*.wxml'],plugins: ['wxml'],// processor: 'wxml/wxml',parser: '@wxml/parser',rules: {'wxml/no-dot-this-in-wx-key': 'error', // 禁止使用this作为key'wxml/empty-tag-self-closing': 'error', // 强制空标签自闭合'wxml/event-binding-style': ['error', 'no-colon'], // 强制事件绑定样式 colon: bind:tap no-colon bindtap'wxml/max-len': 'error', // 设置单行代码最大宽度'wxml/no-duplicate-attributes': 'error', // 禁止使用重复的属性'wxml/no-inconsistent-tagname': 'error', // 禁止不配对的标签名'wxml/no-inline-wxs': 'error', // 禁止使用内联wxs'wxml/no-unexpected-string-bool': 'error', // 禁止使用布尔字符串 关键字需要在双引号之内'wxml/no-vue-directive': 'error', // 禁止在微信小程序里错误的使用vuejs指令'wxml/no-wx-for-with-wx-if': 'error', // 禁止wx:for和wx:if|wx:elseif|wx:else在同一个标签使用'wxml/report-wxml-syntax-error': 'error', // 允许提示wxml语法错误'wxml/report-wxs-syntax-error': 'error', // 允许提示内联wxs里的js语法错误'wxml/wx-key': 'error', // wx:for循环时必须声明wx-key},},],globals: {wx: true,App: true,Page: true,getCurrentPages: true,getApp: true,Component: true,requirePlugin: true,requireMiniProgram: true,},
}
其他，删删减减的，自己看着办吧，如果出现冲突，改其中一个，适配到另一个（prettier和eslint冲突，修改eslint适配prettire或者反过来）
/** Eslint config file* Documentation: https://eslint.org/docs/user-guide/configuring/* Install the Eslint extension before using this feature.*/
module.exports = {env: {es6: true,browser: true,node: true,},ecmaFeatures: {modules: true,},parserOptions: {ecmaVersion: 2018,sourceType: 'module',ecmaFeatures: {experimentalObjectRestSpread: true,modules: true,spread: true,restParams: true,},},globals: {wx: true,App: true,Page: true,getCurrentPages: true,getApp: true,Component: true,requirePlugin: true,requireMiniProgram: true,},extends: 'eslint:recommended',rules: {'no-unused-vars': 'error','no-console': 'off','generator-star-spacing': 'off', // 强制 generator 函数中 * 号周围使用一致的空格// 'no-mixed-operators': 'error', // 禁止混合使用不同的操作符，用括号区分开来quotes: [// 改双引号为单引号'error','single',{avoidEscape: true, // 允许字符串使用单引号或双引号，只要字符串中包含了一个其它引号，否则需要转义allowTemplateLiterals: true, // 允许字符串使用反勾号},],semi: [// 去结尾分号2,'never',{beforeStatementContinuationChars: 'never',},],'no-delete-var': [2],'object-curly-spacing': ['error', 'always'], // 强制在花括号中使用一致的空格'array-bracket-spacing': ['error', 'never'], // 禁止或强制在括号内使用空格'array-bracket-newline': ['error', { multiline: true }], // 强制数组元素间出现换行 (array-element-newline)'eol-last': ['error', 'always'], // 要求或禁止文件末尾保留一行空行 (eol-last)'func-call-spacing': ['error', 'always'], // 要求或禁止在函数标识符和其调用之间有空格indent: ['error', 2], // 强制在对象字面量的键和值之间使用一致的空格'key-spacing': ['error', { beforeColon: false }],'keyword-spacing': ['error', { before: true }], // 强制关键字周围空格的一致性// 'linebreak-style': ['error', 'windows'], // 强制使用一致的换行符风格'no-trailing-spaces': 'error', // 禁用行尾空白'no-whitespace-before-property': 'error', // 禁止属性前有空白'semi-spacing': 'error', // 强制分号前后有空格'space-before-blocks': 'error', // 要求或禁止语句块之前的空格'space-before-function-paren': ['error', 'always'], // 要求或禁止函数圆括号之前有一个空格'space-in-parens': ['error', 'never'], // 禁止或强制圆括号内的空格'space-infix-ops': 'error', // 要求中缀操作符周围有空格'switch-colon-spacing': 'error', // 强制在 switch 的冒号左右有空格,'comma-spacing': ['error', { before: false, after: true }],'dot-notation': ['error'], // 强制尽可能地使用点号// 'eqeqeq': ['error', 'always'], // 要求使用 === 和 !=='no-dupe-keys': 'error', // 禁止对象字面量中出现重复的 key'arrow-spacing': 'error', // es6箭头函数空格},
}

http://www.ppmy.cn/news/66572.html

相关文章

Maven 依赖管理 学习

Maven 依赖管理 学习

目录 Maven 依赖管理 可传递性依赖发现 依赖范围 依赖管理 Maven 自动化部署 问题描述 解决方案 修改项目的 pom.xml Maven Release 插件 Maven Web 应用 创建 Web 应用 构建 Web 应用 部署 Web 应用 Maven 依赖管理 Maven 一个核心的特性就是依赖管理。当我们处…
阅读更多...
瑞云渲染农场怎么用，瑞云渲染多少钱一分钟？

瑞云渲染农场怎么用，瑞云渲染多少钱一分钟？

Renderbus瑞云渲染农场作为亚洲前沿的 云渲染平台&#xff0c;一直以“做最好的云渲染工具”为愿景&#xff0c;紧跟CG行业的技术创新与发展&#xff0c;致力于提供专业可靠、安全稳定、可持续创新的云渲染解决方案&#xff0c;助力推动行业快速发展&#xff0c;被誉为中国云渲…
阅读更多...
C++模板详解（函数模板、类模板）

C++模板详解（函数模板、类模板）

hello,这里是bangbang&#xff0c;今天来讲下模板 目录 1. 泛型编程 2. 函数模板 2.1 函数模板概念 2.2 函数模板格式 2.3 函数模板的实例化 2.4 模板参数的匹配原则 3. 类模板 3.1 类模板定义格式 3.2 类模板实例化 4. 非类型模板参数 5. 模板特化 5.1 模板特化概念 5.2…
阅读更多...
C#套接字通信之UDP组播

C#套接字通信之UDP组播

文章目录 组播的概念简单示例组播的优势 组播的概念 UDP信息传递的方式分三类&#xff0c;分别是 单播 Unicast&#xff1a;客户端与服务器之间的点到点连接多播MultiCast&#xff1a;又称组播&#xff0c;是“一对一组”的通讯模式&#xff0c;加入同一个组的主机可以接受到…
阅读更多...
kubespray部署k8s 1.26集群安装指南

kubespray部署k8s 1.26集群安装指南

Kubespray 是一个自由开源的工具&#xff0c;它提供了 Ansible 剧本(playbook) 来部署和管理 Kubernetes 集群。它旨在简化跨多个节点的 Kubernetes 集群的安装过程&#xff0c;允许用户快速轻松地部署和管理生产就绪的 Kubernetes 集群。 它支持一系列操作系统&#xff0c;包…
阅读更多...
力扣 139. 单词拆分

力扣 139. 单词拆分

一、题目描述 给你一个字符串 s 和一个字符串列表 word_dict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 示例 1&#xff1a; 输入: s "leetcode"…
阅读更多...
Appium环境搭建及元素定位

Appium环境搭建及元素定位

Appium简介 Appium是一个开源测试自动化框架&#xff0c;可用于原生&#xff0c;混合和移动Web应用程序测试。它使用WebDriver 协议驱动iOS&#xff0c;Android和Windows应用程序。 01 环境搭建步骤 Appium环境安装&#xff1a; 第一步 安装 appium 桌面版客户端 Appium-1…
阅读更多...
【动态代理】JDK动态代理与cglib动态代理源码解析

【动态代理】JDK动态代理与cglib动态代理源码解析

JDK动态代理 demo展示 UserService&#xff0c;接口类 public interface UserService {void addUser(); }UserServiceImpl&#xff0c;实现类 public class UserServiceImpl implements UserService {Overridepublic void addUser() {System.out.println("register al…
阅读更多...
最新文章

Copyright @ 2022~2023