關於vue-eslint自動補全代碼，以及自動生成雪碧圖

1、配置eslint

module.exports={
  "printWidth": 240, //一行的字符數，若是超過會進行換行，默認爲80
  "tabWidth": 2, //一個tab表明幾個空格數，默認爲80
  "useTabs": false, //是否使用tab進行縮進，默認爲false，表示用空格進行縮減
  "singleQuote": true, //字符串是否使用單引號，默認爲false，使用雙引號
  "semi": true, //行位是否使用分號，默認爲true
  "trailingComma": "none", //是否使用尾逗號，有三個可選值"<none|es5|all>"
  "bracketSpacing": true, //對象大括號直接是否有空格，默認爲true，效果：{ foo: bar }
  "parser": "vue" //代碼的解析引擎，默認爲babylon，與babel相同。
};

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

module.exports = {
    root: true,
    parserOptions: {
        parser: 'babel-eslint'
    },
    env: {
        browser: true,
    },
    extends: [
        // https://github.com/standard/standard/blob/master/docs/RULES-en.md
        'standard',
        // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
        // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
        'plugin:vue/essential',
        'plugin:prettier/recommended',
    ],
    // required to lint *.vue files
    plugins: [
        'vue'
    ],
    // add your custom rules here
    rules: {
        "prettier/prettier": "off",
        // allow async-await
        'generator-star-spacing': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        "quotes": ["error", "single"]
    }
}

在package.json加入相關

"babel-eslint": "^8.2.6",

"eslint-config-prettier": "^2.9.0",

const createLintingRule = () => ({
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
        fix: true,
        formatter: require('eslint-friendly-formatter'),
        emitWarning: !config.dev.showEslintErrorsInOverlay
    }
});

2、配置雪碧圖

在package.json加入相關

"webpack-spritesmith": "^0.4.1"

const templateFunction = function (data) {
    // console.log(data.sprites);
    if(data.sprites.length>0){
        const shared = '.s-icon { background-image: url(I); }'
            .replace('I', data.sprites[0].image)
        // 注意：此處默認圖標使用的是二倍圖
        const perSprite = data.sprites.map(function (sprite) {
            return '.s-icon-N {display: inline-block;width: SWpx; height: SHpx; }\n.s-icon-N .s-icon, .s-icon-N.s-icon { width: Wpx; height: Hpx; background-position: Xpx Ypx; } '
                .replace(/N/g, sprite.name)
                .replace(/SW/g, sprite.width / 2)
                .replace(/SH/g, sprite.height / 2)
                .replace(/W/g, sprite.width)
                .replace(/H/g, sprite.height)
                .replace(/X/g, sprite.offset_x)
                .replace(/Y/g, sprite.offset_y)
        }).join('\n');

        return shared + '\n' + perSprite
    }

};

plugins: [
    // 雪碧圖相關
    new SpritesPlugin({
        // 目標小圖標
        src: {
            cwd: path.resolve(__dirname, '../src/assets/images/icons'),
            glob: '*.png'
        },
        // 輸出雪碧圖文件及樣式文件
        target: {
            image: path.resolve(__dirname, '../src/assets/css/sprite.png'),
            css: [[path.resolve(__dirname, '../src/assets/css/sprite.css'), {
                format: 'function_based_template'
            }]]
        },
        customTemplates: {
            function_based_template: templateFunction
        },
        // 樣式文件中調用雪碧圖地址寫法
        apiOptions: {
            cssImageRef: process.env.NODE_ENV === 'production'? '~@/assets/css/sprite.png?v=' + Date.parse(new Date()):'~@/assets/css/sprite.png'
        },
        spritesmithOptions: {
            algorithm: 'binary-tree',
            padding: 4
        }
    })
],

 

 

 

const SpritesPlugin = require('webpack-spritesmith');