精华内容
下载资源
问答
  • VSCode 自动格式化代码

    千次阅读 2020-05-14 10:54:00
    { // vscode默认启用了根据文件... // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": true, // 添加 vue 支持 "eslint.va.

    setting.json

    {
        // #每次保存的时候自动格式化
        "editor.formatOnSave": false,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
        },
        "eslint.codeAction.showDocumentation": {
          "enable": true
        },
        "git.enableSmartCommit": true,
        "npm.packageManager": "npm",
        "files.associations": {
          "*.vue": "html"
        }
    }
    

     eslintrc.js

    
    module.exports = {
        root: true,
        parserOptions: {
          parser: 'babel-eslint',
          sourceType: 'module'
        },
        env: {
          browser: true,
          node: true,
          es6: true
        },
        extends: ['plugin:vue/recommended', 'eslint:recommended'],
      
        // add your custom rules here
        // it is base on https://github.com/vuejs/eslint-config-vue
        rules: {
          'vue/max-attributes-per-line': [2, {
            'singleline': 10,
            'multiline': {
              'max': 1,
              'allowFirstLine': false
            }
          }],
          'vue/singleline-html-element-content-newline': 'off',
          'vue/multiline-html-element-content-newline': 'off',
          'vue/name-property-casing': ['error', 'PascalCase'],
          'vue/no-v-html': 'off',
          'accessor-pairs': 2,
          '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'],
          'constructor-super': 2,
          'curly': [2, 'multi-line'],
          'dot-location': [2, 'property'],
          'eol-last': 2,
          '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-quotes': [2, 'prefer-single'],
          'key-spacing': [2, {
            'beforeColon': false,
            'afterColon': true
          }],
          'keyword-spacing': [2, {
            'before': true,
            'after': true
          }],
          'new-cap': [2, {
            'newIsCap': true,
            'capIsNew': false
          }],
          'new-parens': 2,
          'no-array-constructor': 2,
          'no-caller': 2,
          'no-console': 'off',
          'no-class-assign': 2,
          'no-cond-assign': 2,
          'no-const-assign': 2,
          'no-control-regex': 0,
          'no-delete-var': 2,
          'no-dupe-args': 2,
          'no-dupe-class-members': 2,
          'no-dupe-keys': 2,
          'no-duplicate-case': 2,
          'no-empty-character-class': 2,
          'no-empty-pattern': 2,
          'no-eval': 2,
          'no-ex-assign': 2,
          'no-extend-native': 2,
          'no-extra-bind': 2,
          'no-extra-boolean-cast': 2,
          'no-extra-parens': [2, 'functions'],
          'no-fallthrough': 2,
          'no-floating-decimal': 2,
          'no-func-assign': 2,
          'no-implied-eval': 2,
          'no-inner-declarations': [2, 'functions'],
          'no-invalid-regexp': 2,
          'no-irregular-whitespace': 2,
          'no-iterator': 2,
          'no-label-var': 2,
          'no-labels': [2, {
            'allowLoop': false,
            'allowSwitch': false
          }],
          'no-lone-blocks': 2,
          'no-mixed-spaces-and-tabs': 2,
          'no-multi-spaces': 2,
          'no-multi-str': 2,
          'no-multiple-empty-lines': [2, {
            'max': 1
          }],
          'no-native-reassign': 2,
          'no-negated-in-lhs': 2,
          'no-new-object': 2,
          'no-new-require': 2,
          'no-new-symbol': 2,
          'no-new-wrappers': 2,
          'no-obj-calls': 2,
          'no-octal': 2,
          'no-octal-escape': 2,
          'no-path-concat': 2,
          'no-proto': 2,
          'no-redeclare': 2,
          'no-regex-spaces': 2,
          'no-return-assign': [2, 'except-parens'],
          'no-self-assign': 2,
          'no-self-compare': 2,
          'no-sequences': 2,
          'no-shadow-restricted-names': 2,
          'no-spaced-func': 2,
          'no-sparse-arrays': 2,
          'no-this-before-super': 2,
          'no-throw-literal': 2,
          'no-trailing-spaces': 2,
          'no-undef': 2,
          'no-undef-init': 2,
          'no-unexpected-multiline': 2,
          'no-unmodified-loop-condition': 2,
          'no-unneeded-ternary': [2, {
            'defaultAssignment': false
          }],
          'no-unreachable': 2,
          'no-unsafe-finally': 2,
          'no-unused-vars': [2, {
            'vars': 'all',
            'args': 'none'
          }],
          'no-useless-call': 2,
          'no-useless-computed-key': 2,
          'no-useless-constructor': 2,
          'no-useless-escape': 0,
          'no-whitespace-before-property': 2,
          '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': [2, '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'],
          'use-isnan': 2,
          'valid-typeof': 2,
          'wrap-iife': [2, 'any'],
          'yield-star-spacing': [2, 'both'],
          'yoda': [2, 'never'],
          'prefer-const': 2,
          'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
          'object-curly-spacing': [2, 'always', {
            objectsInObjects: false
          }],
          'array-bracket-spacing': [2, 'never'],
          'no-async-promise-executor': 'off'
        }
      }
      

    展开全文
  • vscode自动格式化代码的方法? 第一步:在vscode中安装插件: Prettier -Code formatter 这是安装好了的 第二步:在菜单栏中打开: 文件 - 首选项 - 设置 ;然后搜索settings, 进入settings.json配置文件中 第三步...

    vscode自动格式化代码的方法?

    第一步:在vscode中安装插件: Prettier -Code formatter

    点击
    这是安装好了的

    第二步:在菜单栏中打开: 文件 - 首选项 - 设置 ;然后搜索settings,

    进入settings.json配置文件中

    在这里插入图片描述

    第三步:在settings.json中添加一条格式化代码:“editor.formatOnSave”: true

    在这里插入图片描述
    这样就OK了~~~

    之后还有别的方法还会再补充的~~~~

    展开全文
  • vscode如何自动格式化js代码-ESlint

    万次阅读 热门讨论 2018-12-12 14:44:47
    1)**ESlint:**javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ 2)**vetur:**可以格式化html、标准css(有分号 、大括号的...

    ESlint:是用来统一JavaScript代码风格的工具,不包含css、html等

    解决方案:

    1、安装插件

    1)ESlint: javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~
    2)vetur: 可以格式化html、标准css(有分号 、大括号的那种)、标准js(有分号 、双引号的那种)、vue文件,
    但是! 格式化的标准js文件不符合ESlint规范,会给你加上双引号、分号等。

    Prettier - Code formatter:只关注格式化,并不具有eslint检查语法等能力,只关心格式化文件(最大长度、混合标签和空格、引用样式等),包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

    Manta’s Stylus Supremacy: 格式化stylus的插件(不用就不装),因为vetur会把css格式化有分号 、大括号的那种,此插件会把css格式化成stylus风格。

    2、在vscode的文件-首选项-设置里,右侧配置里添加如下代码即可(代码有注释!),从此直接 Ctrl+S 就能一键格式化了

    代码如下:

    {
         // vscode默认启用了根据文件类型自动设置tabsize的选项
        "editor.detectIndentation": false,
        // 重新设定tabsize
        "editor.tabSize": 2,
        // #每次保存的时候自动格式化 
        "editor.formatOnSave": true,
        // #每次保存的时候将代码按eslint格式进行修复
        "eslint.autoFixOnSave": true,
        // 添加 vue 支持
        "eslint.validate": [
            "javascript",
            "javascriptreact",
            {
                "language": "vue",
                "autoFix": true
            }
        ],
        //  #让prettier使用eslint的代码格式进行校验 
        "prettier.eslintIntegration": true,
        //  #去掉代码结尾的分号 
        "prettier.semi": false,
        //  #使用带引号替代双引号 
        "prettier.singleQuote": true,
        //  #让函数(名)和后面的括号之间加个空格
        "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
        // #这个按用户自身习惯选择 
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        // #让vue中的js按编辑器自带的ts格式进行格式化 
        "vetur.format.defaultFormatter.js": "vscode-typescript",
        "vetur.format.defaultFormatterOptions": {
            "js-beautify-html": {
                "wrap_attributes": "force-aligned"
                // #vue组件中html代码格式化样式
            }
        },
        // 格式化stylus, 需安装Manta's Stylus Supremacy插件
        "stylusSupremacy.insertColons": false, // 是否插入冒号
        "stylusSupremacy.insertSemicolons": false, // 是否插入分好
        "stylusSupremacy.insertBraces": false, // 是否插入大括号
        "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
        "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
         "vetur.validation.template": false  //关闭vetur标签闭合检查(用于解决iview标签报错)
    }
    

    更新2019-07-08

    上面格式化对于element-ui框架的自动格式化支持不好,需要在eslint.js中进行配置,进行标签的匹配,具体格式化规则如下,文件为eslint.js:
    在这里插入图片描述

    rules: {
        'vue/max-attributes-per-line': [
          2,
          {
            singleline: 10,
            multiline: {
              max: 1,
              allowFirstLine: true
            }
          }
        ],
        'vue/html-indent': [
          {
            attribute: 1,
            baseIndent: 1,
            closeBracket: 0,
            alignAttributesVertically: true,
            ignores: []
          }
        ],
        'vue/html-indent': [
          {
            attribute: 1,
            baseIndent: 1,
            closeBracket: 0,
            alignAttributesVertically: true,
            ignores: []
          }
        ],
        'vue/html-closing-bracket-newline': [
          'error',
          {
            singleline: 'never',
            multiline: 'never'
          }
        ]
        }
    

    原文:https://www.jianshu.com/p/23a5d6194a4b

    展开全文
  • 编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等。 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持。 1. 安装 Vetur 插件 2. 在 VS Code 的...
  • vscode如何格式化代码

    千次阅读 2020-12-20 23:22:14
    vs code格式化代码的快捷键如下:在Windows上 Shift+ Alt+F (推荐学习:vscode入门教程)在Mac上 Shift+ Option+F在Ubuntu上 Ctrl+ Shift+I但是自带的格式化并不能满足我的需求,这个时候,不得不说插件大法好。代码...

    vs code格式化代码的快捷键如下:

    在Windows上 Shift+ Alt+F (推荐学习:vscode入门教程)

    在Mac上 Shift+ Option+F

    在Ubuntu上 Ctrl+ Shift+I

    但是自带的格式化并不能满足我的需求,这个时候,不得不说插件大法好。

    代码格式化为eslint风格

    需要插件:eslint

    在设置中添加:"eslint.autoFixOnSave": true,

    "eslint.validate": [

    "javascript",

    "javascriptreact",

    {

    "language": "html",

    "autoFix": true

    },

    {

    "language": "vue",

    "autoFix": true

    }

    ],

    eslint.autoFixOnSave 用来进行保存时自动格式化,但是默认只支持 javascript .js 文件。

    eslint.validate 用来配置作用的文件类型。

    然后在保存代码的时候,就会自动格式化为eslint风格(需要保存多次)。

    展开全文
  • ESlint:是用来统一JavaScript代码风格的工具,不包含css、html等。背景近来研究前端,然后一直在百度上找VScode格式化(ESlint)的...一、安装插件image1)ESlint:javascript代码检测工具,可以配置每次保存时格式化j...
  • VSCode 自动格式化react代码

    千次阅读 2020-01-13 10:13:49
    点击右下角的javaScript, 在弹出的选择框中, 输入选择JavascriptReact或者TypescriptReact
  • css格式化要在vscode装: Beautify css/sass/scss/less js格式化要装 ESLint .vscode 里面设置 { "editor.formatOnSave": true, "editor.tabSize": 2, "editor.codeActionsOnSave": { "source.fixAll....
  • vscode 保存自动格式化代码

    千次阅读 2021-02-03 21:52:34
    "vscode-typescript", "vetur.format.defaultFormatter.html": "js-beautify-html", "eslint.validate": [ "javascript", // 用eslint的规则检测js文件 { "language": "vue", // 检测vue文件 "autoFix": true // 为...
  • 导致的问题:由于vue语法规范问题,导致保存自动格式化成不被使用的代码格式,出现代码错误等异常 写这篇的时候,我也查阅了很多资料有很多的资料不能被使用,也换过很多的编辑器如:Atom,sublime,webstorm 否掉的...
  • 无需安装插件,文件 >...添加如下代码// #每次保存的时候自动格式化"editor.formatOnSave": true,完成在网上看过比较多的设置可借鉴{"editor.quickSuggestions": {//开启自动显示建议"other": tru...
  • VSCode自动格式化Vue代码Prettier-Code formatter配置代码格式化文件配置setting.json VsCode关于Vue的格式化插件非常多,网上的资料也五花八门,可以使用的非常少, 经过多次探索,终于找到一个可以用的方式。 ...
  • VScode设置Eslint规则并在保存时自动修复,让编程如丝般顺滑 亦洁的前端之路2020-05-28 17:17:013185收藏4 分类专栏:前端文章标签:javascriptnode.jses6vue.jshtml 版权 不管是多人合作还是个人项目,代码...
  • Vscode代码格式化

    千次阅读 2021-06-14 00:51:02
    Vscode代码格式化Vscode代码格式化①首选项 → ② 设置③ 点击 这个小图标④ 然后把以下的代码复制进去。{"window.zoomLevel": 2, //设置窗口缩放级别"files.autoSave": "afterDelay", //自动保存代码"breadcrumbs....
  • VsCode自动格式化代码

    千次阅读 热门讨论 2019-08-27 17:56:36
    前言 编辑器代码风格一致,是前端代码规范的一部分;是同一个项目,或者同一个小组,非常有必要保持代码的风格。本篇博客只拿vue项目来...Eslint自动格式化 依赖安装(package.json) "eslint": "^5.16.0", "e...
  • vscode格式化配置

    2020-12-30 11:35:12
    此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化一、安装插件:Prettier、Eslint、VeturESlint:javascript代码检测工具,可以配置每次保存时格式化jsPrettier - Code formatter:只关注格式化,并不具有eslint检查...
  • VScode+ESlint 自动格式化代码(2021)

    千次阅读 多人点赞 2021-02-21 12:09:01
    利用 Vue CLI 创建项目时要将 ESlint 选上,下载完依赖后,用 VSCode 打开项目。 1、安装插件 ESLint, 2、配置eslint插件 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> ...
  • 代码的时候,eslint老报错,修复完了,一保存,格式又回去了。。。 在设置里搜 format 点typescript,把第一个取消掉
  • 1、使用时首先安装一下插件: 1、ESlint //代码分格检查, 2、vetur // 语法高亮,Vetur支持.vue文件的语法高亮显示,除了...4、Manta's Stylus Supremacy // 格式化 css 2、修改配置: 3、设置配置内容: {...
  • 由于vetur版本更新,导致一个规则:先从源代码中查找有没有.prettierrc.json文件,如果有的话再读取settingjson中的prettier设置 .prettierrc.json { "semi": true, "singleQuote": true, "tabWidth": 2 } ...
  • vscode代码格式化js自动换行问题

    千次阅读 2020-05-29 11:11:26
    vscode代码格式化js自动换行问题 如果设置了默认格式化是使用自带JavaScript和Typescript的语言功能会看的吐血 类似下面这种 // 使用自带JavaScript和Typescript的语言功能 var a = $(this) .closest('.b') .find...
  • ESlint + VSCode自动格式化代码(2020)

    千次阅读 2020-05-07 21:04:42
    利用 Vue CLI 创建项目时要将 ESlint 选上,下载完依赖后,用 VSCode 打开项目。 安装插件 ESLint,然后 File -> Preference -> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 用户),搜索 ...
  • vscode 代码格式化

    2021-06-14 00:51:43
    最近开发Vue项目,由于前面的前端开发离职,写的代码混乱,没有统一的格式,于是想搞一套前端统一格式化的配置,方便以后代码查看,git提交等。然后我就查阅资料写了各种配置项{"explorer.confirmDelete": false,...
  • vscode 配置vue+vetur+eslint+prettier自动格式化功能 问题描述 最近用Nodejs + express 写了一个zip文件上传的功能,代码给了别人看,各种吐槽,代码不规范,没有按照eslint,编辑器打开就是各种红色提醒,当然...
  • vscode保存代码,自动格式化代码设置方法

    万次阅读 多人点赞 2019-07-23 09:27:05
    1.安装eslint依赖 在package.json中安装eslint的依赖 "eslint": "^4.19.1", "eslint-friendly-formatter": "^4.0.1", "eslint-loader": "^...2.自动格式化设置 1、window电脑: 文件 > 首选项 > 设...
  • 此时通过eslint插件可以实现对vue代码自动格式化。使用方式在vscode的插件模块处,搜索eslint。找到下面的插件。 安装完成后,进行配置。file --> preferences --> setting找到eslint。 打开setting.json。...
  • Vscode格式化代码代码自动换行

    千次阅读 2021-02-03 10:26:46
    Vscode中找到设置(有2种方法) vscode–>首选项–>设置,之后在出现的界面输入settings.json。 也可以在vscode界面左下角点击设置的图标之后点击设置同样也可以找到。 在settings.json中加入以下...
  • F1VSCode 如何格式化或美化js/css代码,本经验介绍在VSCode查看代码时,如何美化不换行的代码,以及如何格式化vs code格式化代码的快捷键如下:(来源于这里) On Windows Shift+Alt+F On Mac Shift+Option+F On ...
  • vsCode每次保存自动格式化代码

    千次阅读 2019-09-17 10:06:12
    vsCode每次保存自动格式化代码 在settings.json里面添加: // #每次保存的时候自动格式化 "editor.formatOnSave": true,

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,050
精华内容 3,220
关键字:

vscode自动格式化js代码