美文网首页
prettier插件配置符合eslint规范

prettier插件配置符合eslint规范

作者: 猪儿打滚 | 来源:发表于2021-08-16 16:43 被阅读0次

1、创建对应配置文件

prettier3.7以上会优先读取项目根目录下的editorconfig or prettier config,如果有,就不会使用vscode setting中的设置,所以最好每个项目都配置一个单独的 prettier 配置文件。名字为:.prettierrc

2、配置内容

根据需求自行修改,并保存。注释需去掉,不兼容//

{
    // tab缩进大小,默认为2
    "tabWidth": 4,
    // 使用tab缩进,默认false
    "useTabs": false,
    // 使用分号, 默认true
    "semi": false,
    // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    "singleQuote": false,
    // 行尾逗号,默认none,可选 none|es5|all
    // es5 包括es5中的数组、对象
    // all 包括函数对象等所有可选
    "TrailingCooma": "all",
    // 对象中的空格 默认true
    // true: { foo: bar }
    // false: {foo: bar}
    "bracketSpacing": true,
    // JSX标签闭合位置 默认false
    // false: <div
    //          className=""
    //          style={{}}
    //       >
    // true: <div
    //          className=""
    //          style={{}} >
    "jsxBracketSameLine": false,
    // 箭头函数参数括号 默认avoid 可选 avoid| always
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    "arrowParens": "avoid"
}

3、保存并生效

shift + alt + f,格式化的文件符合eslint要求


ps

如果还有问题,配合https://eslint.bootcss.com/来修改.eslintrc.js里的配置(注意要重跑项目才起效)

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 'off',
    'no-trailing-spaces': 'off'
  }
}

相关文章

网友评论

      本文标题:prettier插件配置符合eslint规范

      本文链接:https://www.haomeiwen.com/subject/extvbltx.html