vscode配置----ctrl+s保存格式化(vue3)

一、配置项目 Prettier - ESlint

Vite 需要 Node.js 版本 >= 12.0.0

vscode 文件 > 首选项 > 设置 > ( 搜索 setting ) > 点击 (在settings.json中编辑)

settings.json (用户 / 工作区)

{"editor.fontSize": 16,"workbench.colorTheme": "Ayu Dark Bordered","workbench.iconTheme": "ayu","window.zoomLevel": 0,"git.autofetch": true,"[json]": {"editor.quickSuggestions": {"strings": true},"editor.suggest.insertMode": "replace"},// #每次保存的时候自动格式化//   "editor.formatOnSave": true,"eslint.validate": ["javascript","html","javascriptreact", // react jsx"typescript", // ts"typescriptreact" // react tsx],"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"editor.formatOnSave": true,

vscode 控制台安装
1. npm install eslint eslint-plugin-vue prettier vue-eslint-parser -D
vscode 扩展工具中安装
1. Prettier ESLint
2. Prettier - Code formatter

项目根目录中创建两个文件

.prettierrc

{"semi": false,"singleQuote": true,"trailingComma": "none","bracketSpacing": true,"arrowParens": "always"
}

.eslintrc.js


module.exports = {extends: ['eslint:recommended', 'plugin:vue/essential'],/*  extends: ['plugin:vue/vue3-essential','eslint:recommended','plugin:vue/essential','plugin:vue/vue3-strongly-recommended','plugin:vue/strongly-recommended','plugin:vue/vue3-recommended'], */parserOptions: {ecmaVersion: 2021, // 版本2018 会报错 import的错sourceType: 'module'},plugins: ['vue'],env: {node: true // 只需将该项设置为 true 即可 =>  解决nodule.exports 报错问题},rules: {// 忽略eslint不支持的组件命名规范'vue/multi-word-component-names': ['error',{ignores: ['user', 'login', 'welcome', 'breadcrumb', 'home']}],'accessor-pairs': 2, // getter/setter 一起使用// => 前后有空格'arrow-spacing': [2,{before: true,after: true}],'block-spacing': [2, 'always'],// {} 风格'brace-style': [2,'1tbs',{allowSingleLine: true}],camelcase: [0,{properties: 'always'}],// 对象字面量项尾是否允许有逗号'comma-dangle': [2, 'never'],// 逗号前后是否需要空格'comma-spacing': [2,{before: false,after: true}],// 逗号风格，换行时在行首还是行尾'comma-style': [2, 'last'],// 非派生类不能调用super，派生类必须调用super'constructor-super': 2,curly: [2, 'multi-line'],// 对象访问符的位置，换行的时候在行首还是行尾'dot-location': [2, 'property'],// 文件以换行符结束'eol-last': 2,// 必须使用全等，除非与 null 进行比较eqeqeq: ['error', 'always', { null: 'ignore' }],// 生成器函数*的前后空格'generator-star-spacing': [2,{before: true,after: true}],'handle-callback-err': [2, '^(err|error)$'],// 缩进风格indent: [2,2,{SwitchCase: 1}],// 在 JSX 属性中一致使用双引号或单引号'jsx-quotes': [2, 'prefer-single'],// 对象字面量中冒号的前后空格'key-spacing': [2,{beforeColon: false,afterColon: true}],'keyword-spacing': [2,{before: true,after: true}],// 函数名首行大写必须使用new方式调用'new-cap': [2,{newIsCap: true,capIsNew: false}],// new时必须加小括号'new-parens': 2,// 不允许使用构造函数来构造新Array数组，而是倾向于使用数组文字符号'no-array-constructor': 2,// 不允许使用arguments.caller和arguments.callee'no-caller': 2,// 是否禁止使用console'no-console': 'off',// 禁止给类赋值'no-class-assign': 2,// 禁止在条件表达式中使用赋值语句'no-cond-assign': 2,// 禁止修改const声明的变量'no-const-assign': 2,// 禁止在正则表达式中使用 ASCII 控制字符'no-control-regex': 0,// 不能对var声明的变量使用delete操作符'no-delete-var': 2,// 函数参数不能重复'no-dupe-args': 2,// 类成员名不能重复'no-dupe-class-members': 2,// 在创建对象字面量时不允许键重复'no-dupe-keys': 2,// switch中的case标签不能重复'no-duplicate-case': 2,// 不允许在正则表达式中使用空字符类'no-empty-character-class': 2,// 禁止使用空解构模式'no-empty-pattern': 2,// 禁止使用eval'no-eval': 2,// 禁止给catch语句中的异常参数赋值'no-ex-assign': 2,// 禁止扩展native对象'no-extend-native': 2,// 禁止不必要的函数绑定'no-extra-bind': 2,// 禁止不必要的bool转换'no-extra-boolean-cast': 2,// 禁止非必要的括号'no-extra-parens': [2, 'functions'],// 禁止switch穿透'no-fallthrough': 2,// 禁止省略浮点数中的0 如：.5 3.'no-floating-decimal': 2,// 禁止重复的函数声明'no-func-assign': 2,// 禁止使用隐式eval'no-implied-eval': 2,// 禁止在块语句中使用声明（变量或函数）'no-inner-declarations': [2, 'functions'],// 禁止无效的正则表达式'no-invalid-regexp': 2,// 不能有不规则的空格'no-irregular-whitespace': 2,// 禁止使用__iterator__ 属性'no-iterator': 2,// label名不能与var声明的变量名相同'no-label-var': 2,// 禁止标签声明'no-labels': [2,{allowLoop: false,allowSwitch: false}],// 禁止不必要的嵌套块'no-lone-blocks': 2,// 禁止混用tab和空格'no-mixed-spaces-and-tabs': 2,// 不能用多余的空格'no-multi-spaces': 2,// 字符串不能用 \ 换行'no-multi-str': 2,// 空行最多不能超过 1 行'no-multiple-empty-lines': [2,{max: 1}],// 不能重写 native 对象'no-native-reassign': 2,// in 操作符的左边不能有 !'no-negated-in-lhs': 2,// 禁止使用new Object()'no-new-object': 2,// 禁止使用new require'no-new-require': 2,// 禁止使用new symbol'no-new-symbol': 2,// 禁止使用new创建包装实例，new String new Boolean new Number'no-new-wrappers': 2,// 不能调用内置的全局对象，比如 Math() JSON()'no-obj-calls': 2,// 禁止使用八进制数字'no-octal': 2,// 禁止使用八进制转义序列'no-octal-escape': 2,// node中不能使用__dirname或__filename做路径拼接'no-path-concat': 2,// 禁止使用__proto__属性'no-proto': 2,// 禁止重复声明变量'no-redeclare': 2,// 禁止在正则表达式字面量中使用多个空格'no-regex-spaces': 2,// return 语句中不能有赋值表达式'no-return-assign': [2, 'except-parens'],// 不能自我赋值'no-self-assign': 2,// 不能比较自身'no-self-compare': 2,// 禁止使用逗号运算符'no-sequences': 2,// 严格模式中规定的限制标识符不能作为声明时的变量名使用'no-shadow-restricted-names': 0,// 函数调用时 函数名与()之间不能有空格'no-spaced-func': 2,// 禁止稀疏数组 如：[1,,2]'no-sparse-arrays': 2,// 在调用super()之前不能使用this或super'no-this-before-super': 2,// 禁止抛出字面量错误 throw "error";'no-throw-literal': 2,// 一行结束后面不要有空格'no-trailing-spaces': 2,// 不能有未定义的变量'no-undef': 2,// 变量初始化时不能直接给它赋值为undefined'no-undef-init': 2,// 避免多行表达式'no-unexpected-multiline': 2,// 禁用一成不变的循环条件'no-unmodified-loop-condition': 2,// 禁止可以在有更简单的可替代的表达式时使用三元操作符'no-unneeded-ternary': [2,{defaultAssignment: false}],// 不能有无法执行的代码'no-unreachable': 2,// 禁止在 finally 语句块中出现控制流语句'no-unsafe-finally': 2,// 不能有声明后未被使用的变量或参数'no-unused-vars': [2,{vars: 'all',args: 'none'}],// 禁止不必要的call和apply'no-useless-call': 2,// 禁止对象和类中不必要的计算属性键'no-useless-computed-key': 2,// 不允许不必要的构造函数'no-useless-constructor': 2,// 不允许不必要的转义字符'no-useless-escape': 0,// 不允许属性前有空格'no-whitespace-before-property': 2,// 禁用with'no-with': 2,// 连续声明'one-var': [2,{initialized: 'never'}],// 换行时运算符在行尾还是行首'operator-linebreak': [2,'after',{overrides: {'?': 'before',':': 'before'}}],// 块语句内行首行尾是否要空行'padded-blocks': [2, 'never'],// 引号类型quotes: [2,'single',{avoidEscape: true,allowTemplateLiterals: true}],// 语句强制分号结尾semi: [2, 'never'],// 分号前后空格'semi-spacing': [2,{before: false,after: true}],// 不以新行开始的块{前面要不要有空格'space-before-blocks': [2, 'always'],// 函数定义时括号前面要不要有空格'space-before-function-paren': [0, 'never'], // [2, 'always']  never// 小括号里面要不要有空格'space-in-parens': [2, 'never'],// 中缀操作符周围要不要有空格'space-infix-ops': 2,// 一元运算符的前/后要不要加空格'space-unary-ops': [2,{words: true,nonwords: false}],// 注释风格要不要有空格什么的'spaced-comment': [2,'always',{markers: ['global','globals','eslint','eslint-disable','*package','!',',']}],// 模板字符串中是否要空格'template-curly-spacing': [2, 'never'],// 禁止比较时使用NaN，只能用isNaN()'use-isnan': 2,// 必须使用合法的typeof的值'valid-typeof': 2,// 立即执行函数表达式的小括号风格'wrap-iife': [2, 'any'],// yield*表达式间是否使用空格'yield-star-spacing': [2, 'both'],// 禁止尤达条件yoda: [2, 'never'],// 首选const'prefer-const': 2,// 生产环境禁用 debugger// eslint-disable-next-line no-undef'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有开发环境可以使用debugger// 大括号内是否允许不必要的空格'object-curly-spacing': [2,'always',{objectsInObjects: false}],// []内是否允许不必要的空格'array-bracket-spacing': [2, 'never']// 每行的最大属性数}
}

vscode配置-保存格式化相关推荐

vscode配置AStyle格式化代码
伙伴们按照步骤来就可以成功,如果我写的不清楚,麻烦评论或者私信我. 一.打开vscode插件下载astyle 二.下载AStyle并配置环境 1.官网下载http://astyle.sourcefor ...
vscode 设置保存格式化，当保存时，单引号变成了双引号，vue项目报错
新建一个vue项目并设置了格式化,当我们在初始化结构目录中进行修改并保存时,会出现单引号变成了双引号,导致运行项目报错问题,解决方法如下: 在项目根目录中,新建一个文件,命名为' .prettierr ...
VScode配置eslint保存自动格式化，eslint格式化去掉分号和双引号。vscode自动保存去掉分号和双引号；““
本文是开启eslint检验和配置eslint格式化:如果想要关闭eslint,查看这篇关闭eslint方法: 1.必须安装的三个插件eslint, prettier-Code formatter ,v ...
【22新版VSCode】配置自动格式化代码(保存文件自动格式化代码和tab自动格式化代码)
做html开发时,使用快捷键alt+shift+f格式化代码并不是很方便. 想配置自动格式化代码,发现新版本vs code配置方法有点不一样.记录一下. 问题描述a 22年新版vs code配置&qu ...
初用VScode并配置，自定义代码片段（快捷键），自动格式化代码快捷键，保存格式化代码快捷键
一.VScode 介绍.下载.安装. 一个运行于 Mac OS X.Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器. 免费,可以直接去微软官网去下载.htt ...
关闭eslint检查2020_2020 vscode配置eslint保存后自动fix
2020 vscode配置eslint保存后自动fix 这篇文章发布于 2019/10/12,归类于计算机基础与开发工具标签: vscode 保存自动fix,vscode 保存执行fix,esli ...
在使用 VScode 进行代码格式化后，保存发现代码又变乱了，怎么办？
出现的问题: 在用 VScode 时,代码使用格式化文档时,可以完美的进行格式化,但保存后,代码变乱或遇到如下问题: 保存代码的时候,代码被自动格式化,然后格式就变乱了(只要保存,格式就被打乱) ...
VScode配置ESLint检测语法+Prettier代码格式化
文章目录前言 1. ESLint 支持几种格式的配置文件 2. ESLint的数字代表 3. VSCode 默认格式化配置 4. Prettier 配置 5. 如何解决 ESLint 与 Prett ...
个人建议：设置Alt+S快捷键来控制VSCode自动保存切换功能
经常要修改配置文件或者组件Vue,但是自动保存如果设置了就会导致还没输入完成一个完整代码行,就自动格式化(当时这种情况真的想骂人),但平时编辑Vue页面文件又不想每次都去Ctrl+S保存(毕竟键盘死的 ...

vscode配置-保存格式化

vscode配置----ctrl+s保存格式化(vue3)

一、配置项目 Prettier - ESlint

vscode配置-保存格式化相关推荐

最新文章

热门文章