亲宝软件园·资讯

展开

vs Code + Eslint + Prettier 代码格式化(vue开发)

随心小宝 人气:0

一、什么是Eslint

   通过查看eslint官网(官网传送门),我们就可以知道,eslint就是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,主要用来检测代码风格是不是符合指定的规则/规范,这样有利于团队开发的时候代码风格统一,.毕竟每个人的代码风格不一致,使用eslint代码校验工具就保证了代码风格的统一性。

二、什么Prettier

  通过查看prettier官网(官网传送门),我们就知道,prettier是一个代码格式化工具,包括JavaScript (including experimental features)、JSX、Angular、Vue、Flow、TypeScript、CSS, Less, and SCSS、HTML、JSON、GraphQL、Markdown, including GFM and MDX、YAML各种语言,简而言之,这个工具能够使输出代码保持风格一致。

三、vs Code安装相关插件

  在这里我默认你已经安装好了vs Code,如果还没有安装后者不知道怎么安装也没关系,可以查看安装vs Code的其他博客,我这里不在赘述。vs Code安装好之后,这里要介绍几个常用的插件,可以灵活使用,以方便使用提高效率为原则。

  1、Vetur:  vue语法高亮插件;

  2、ESlint 语法错误检测工具;

  3、HTML Snippets 回车或按下Tab键生成标签;

  4、Auto Rename Tag 自动修改匹配的标签;

  5、prettier 代码格式化工具;

四、vs Code格式化相关配置

  vs Code格式化插件有很多,这里首推prettier,可以根据自己的需求进行配置,并且设置format on save,就会在代码格式化的时候自动保存

{
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_line_length": 200,
            "wrap_attributes": "auto",
            "end_with_newline": false
        }
    },
    //分号
    "prettier.semi": false,
    "prettier.singleQuote": true, //使用单引号替代双引号
    "prettier.eslintIntegration": true,
    //函数前加空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "eslint.alwaysShowStatus": true,
    "eslint.autoFixOnSave": true,
    "eslint.workingDirectories": [
        ".eslintrc.js",
        {
            "mode": "auto"
        }
    ],
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        { "language": "vue", "autoFix": true }
    ],
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    //默认JavaScript格式化程序(为了更美观)
    "javascript.format.enable": true,
    "prettier.arrowParens": "avoid",
}

五、eslint相关配置

  eslint先关配置跟prettier结合起来,设置prettier的eslintIntegration属性为true,就可以根据eslint相关配置规则格式化代码,相关配置如下,更多配置规则请查看官网

  

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true
    // "jest":true
  },
  // required to lint *.vue files
  plugins: ['vue'],
  extends: ['plugin:vue/essential', 'standard'],
  // add your custom rules here
  rules: {
    // allow async-await
    camelcase: 'off',
    'no-console': 'error',
    'standard/no-callback-literal': 'off',
    'generator-star-spacing': 'off',
    'space-before-function-paren': [
      'error',
      {
        anonymous: 'always',
        named: 'never',
        asyncArrow: 'never'
      }
    ],
    'func-call-spacing': ['error', 'never'],
    'vue/no-mutating-props': 'nerve',
    // allow debugger during development
    // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': 'error',
    'template-curly-spacing': 'off',
    quotes: ['error', 'single'],
    // 强制不使用分号结尾
    semi: ['error', 'never'],
    indent: [
      'error',
      2,
      {
        ignoredNodes: ['TemplateLiteral', 'ConditionalExpression'],
        SwitchCase: 1
      }
    ]
    // end 解决eslint报错问题
  }
}

  在setting.json中设置一下配置,可在格式化的时候自动安装eslint规则修复不符合规范的代码。

"eslint.validate": [
        "javascript",
        "javascriptreact",
        { "language": "vue", "autoFix": true }
    ],

 

加载全部内容

相关教程
猜你喜欢
用户评论