vscodeeslint指的是什么-创新互联

这篇文章给大家分享的是有关vscode eslint指的是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联建站-专业网站定制、快速模板网站建设、高性价比连城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式连城网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖连城地区。费用合理售后完善,10余年实体公司更值得信赖。

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

解决方案:

1、安装插件

(1)ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~

(2)vetur:可以格式化html、标准css(有分号 、大括号的那种)、标准js(有分号 、双引号的那种)、vue文件,

但是!格式化的标准js文件不符合ESlint规范,会给你加上双引号、分号等,像这样

vscode eslint指的是什么

(不好)

能把html格式化分行显示

vscode eslint指的是什么

(好)

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

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

vscode eslint指的是什么

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

vscode eslint指的是什么

vscode eslint指的是什么

代码如下:

{
     // 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 // 两个选择器中是否换行
}

感谢各位的阅读!关于“vscode eslint指的是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前标题:vscodeeslint指的是什么-创新互联
本文链接:http://pwwzsj.com/article/psghc.html